带按钮的多个复选框答案

【问题标题】：Multiple checkbox with button带按钮的多个复选框
【发布时间】：2021-05-19 13:04:32
【问题描述】：

如何在使用复选框继续之前选择用户喜欢的主题。我希望仅在选中复选框后才启用下一个按钮。

HTML

<a href="search.html"><input type="submit" value="Next" id="next" disabled="disabled"></a>

<ul>
  <li>
    <input class="checkbox" type="checkbox" id="chkPlant1" unchecked="checked"/>
    <label for="chkPlant1"><img src="img/plant1.jpg" /></label>
  </li>

  <li>
    <input class="checkbox" type="checkbox" id="chkPlant2" />
    <label for="chkPlant2"><img src="img/plant2.jpg" /></label>
  </li>

  <li>
    <input class="checkbox" type="checkbox" id="chkPlant3" />
    <label for="chkPlant3"><img src="img/plant3.png" /></label>
  </li>

  <li>
    <input class="checkbox" type="checkbox" id="chkPlant4" />
    <label for="chkPlant4"><img src="img/plant4.jpg" /></label>
  </li>
</ul>

<script type="text/javascript">
    
    $(function () {
      $("#chkPlant1").change(function () {
        if($('#chkPlant1').is(':checked')) { 
          $("#next").prop("disabled", false);
        }
        else {
          $("#next").prop("disabled", true);
        }
    });
  });

  </script>

【问题讨论】：

标签： javascript html jquery checkbox

【解决方案1】：

使用类input.checkbox 定位任何输入，而不仅仅是第一个，并检查其中是否有任何一个被选中，这将确保至少选择一个。

$("input.checkbox").change(function() {
    if ($("input.checkbox").is(':checked')) {

$(function() {
  $("input.checkbox").change(function() {
    if ($("input.checkbox").is(':checked')) {
      $("#next").prop("disabled", false);
    } else {
      $("#next").prop("disabled", true);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="search.html"><input type="submit" value="Next" id="next" disabled="disabled"></a>

<ul>
  <li>
    <input class="checkbox" type="checkbox" id="chkPlant1" unchecked="checked" />
    <label for="chkPlant1"><img src="img/plant1.jpg" /></label>
  </li>

  <li>
    <input class="checkbox" type="checkbox" id="chkPlant2" />
    <label for="chkPlant2"><img src="img/plant2.jpg" /></label>
  </li>

  <li>
    <input class="checkbox" type="checkbox" id="chkPlant3" />
    <label for="chkPlant3"><img src="img/plant3.png" /></label>
  </li>

  <li>
    <input class="checkbox" type="checkbox" id="chkPlant4" />
    <label for="chkPlant4"><img src="img/plant4.jpg" /></label>
  </li>
</ul>

【讨论】：

【解决方案2】：

使用:checked 伪选择器和length 属性，如下所示：

$(function() {

  function updateView() {
    // count of all checked inputs with class .checkbox
    if ($("input.checkbox:checked").length > 0) { 
      $("#next").prop("disabled", false);
    } else {
      $("#next").prop("disabled", true);
    }
  }

  // match all inputs with class .checkbox
  $("input.checkbox").change(function(event) {
    updateView();
  });

  // initialize
  updateView();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<a href="search.html"><input type="submit" value="Next" id="next"></a>
<ul>
  <li><input class="checkbox" type="checkbox" id="chkPlant1" /></li>
  <li><input class="checkbox" type="checkbox" id="chkPlant2" /></li>
  <li><input class="checkbox" type="checkbox" id="chkPlant3" /></li>
  <li><input class="checkbox" type="checkbox" id="chkPlant4" /></li>
</ul>

【讨论】：

【解决方案3】：

如果您不想使用该课程，我希望这会有所帮助

<script type="text/javascript">

$(function () {
  $("#chkPlant1").change(function () {
    if($('#chkPlant1').is(':checked')) { 
      $("#next").prop("disabled", false);
    }
    else {
      $("#next").prop("disabled", true);
    }
   });
  $("#chkPlant2").change(function () {
    if($('#chkPlant2').is(':checked')) { 
      $("#next").prop("disabled", false);
    }
    else {
      $("#next").prop("disabled", true);
    }
});
 $...
});

</script>

【讨论】：