Question

我试过以下代码但没有工作，所以请建议只使用jquery的其他任何方法。

$("#Checkboxes4 :checkbox").change(function() {
   if($('#Checkboxes4').length > 1){
		$('#Checkboxes4').prop('checked',false);
		$(this).prop('checked',true);
	}
});

<label class="col-md-2 control-label" for="Checkboxes">Spices</label>               
<div class="col-md-10 columns">                    
  <label class="checkbox-inline" ><input type="checkbox" name="Checkboxes4[]" id="Checkboxes4" value="1+">1+ Kg</label>             
  <label class="checkbox-inline" ><input type="checkbox" name="Checkboxes4[]" id="Checkboxes4" value="5+">5+ Kg</label>      
  <label class="checkbox-inline"><input type="checkbox" name="Checkboxes4[]" id="Checkboxes4" value="10+">10+ Kg</label> 
</div>

Answer 1

也许单选按钮可以更好地为您服务？

单选按钮的设计目的是在任何时候只检查一个组中的一个单选按钮，从而实现＆＃34;限制检查多个复选框＆＃34;。

这是比使用复选框更好的解决方案，因为您不需要使用任何javascript或Jquery来强制执行此规则。

示例：

<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
</form>

演示：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_radio

Answer 2

需要注意的事项：

在这种情况下，您应该使用具有相同名称组的radios。
永远不要对多个元素使用相同的ID。每个元素都应该有它唯一的ID。当相同的ID出现在页面上时，只有第一个元素才能使事件被注册。
当涉及到事件绑定时，您可以使用类名，因为类名总是返回一个集合。
在您的情况下，您可以将ID更改为类，然后您可以使用下面的代码段。

$('.Checkboxes4').change(function() {
  $(this).closest('label').siblings('label').find(':checkbox').prop('disabled', this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-2 control-label" for="Checkboxes">Spices</label>
<div class="col-md-10 columns">
  <label class="checkbox-inline">
    <input type="checkbox" name="Checkboxes4[]" class="Checkboxes4" value="1+">1+ Kg</label>
  <label class="checkbox-inline">
    <input type="checkbox" name="Checkboxes4[]" class="Checkboxes4" value="5+">5+ Kg</label>
  <label class="checkbox-inline">
    <input type="checkbox" name="Checkboxes4[]" class="Checkboxes4" value="10+">10+ Kg</label>
</div>

我已将属性id更改为class="Checkboxes4"。

Answer 3

尝试这种方式：

$('#Checkboxes1').on('change', function() {
  if($(this).siblings(':checked').length > 1) {
   this.checked = false;
}
});

另请参阅：Disable checkboxes when 6 are checked -- multiple forms on page with checkbox groups

Answer 4

首先，您不应将所有input设置为相同的id。将id替换为class

以下代码是checkboxes的解决方案。希望这有帮助^^

＆＃13;

$(".a").change(function() {
    $('.a').prop("checked",false);
    $(this).prop("checked",true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-2 control-label" for="Checkboxes">Spices</label>               
<div class="col-md-10 columns">                    
  <label class="checkbox-inline" ><input type="checkbox" name="Checkboxes4[]" class ="a" value="1+">1+ Kg</label>             
  <label class="checkbox-inline" ><input type="checkbox" name="Checkboxes4[]" class ="a" value="5+">5+ Kg</label>      
  <label class="checkbox-inline"><input type="checkbox" name="Checkboxes4[]" class ="a" value="10+">10+ Kg</label> 
</div>

＆＃13;

Answer 5

在HTML中，不允许使用具有相同ID的多个元素。

你需要：

在文档/正文就绪事件中设置侦听器
在复选框
将事件附加到选定班级的复选框。

这是工作代码：

 $("body").ready(function(){
    $("input:checkbox.Checkboxes4").change(function() {
       if($('.Checkboxes4').length > 1){
            $('.Checkboxes4').prop('checked',false);
            $(this).prop('checked',true);
        }
    });

 });

<label class="col-md-2 control-label" for="Checkboxes">Spices</label>               
<div class="col-md-10 columns">                    
  <label class="checkbox-inline" ><input type="checkbox" name="Checkboxes4[]" class="Checkboxes4" value="1+">1+ Kg</label>             
  <label class="checkbox-inline" ><input type="checkbox" name="Checkboxes4[]" class="Checkboxes4" value="5+">5+ Kg</label>      
  <label class="checkbox-inline"><input type="checkbox" name="Checkboxes4[]" class="Checkboxes4" value="10+">10+ Kg</label> 
</div>

JS Fiddle

如何在jquery中限制检查多个复选框。？

5 个答案: