带按钮的多个复选框

Posted 2023-05-08

【中文标题】带按钮的多个复选框

【英文标题】：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>

【参考方案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>