限制复选框的数量

Question

我有一个包含多个复选框的表单。我在表单中有三类复选框。我需要限制最多三个复选框每类别。

我使用了这个脚本，但它限制为每个表单三个复选框。

jQuery(function(){ 
    var max = 3; 
    var checkboxes = jQuery('input[type="checkbox"]'); 

    checkboxes.change(function(){ 
     var current = checkboxes.filter(':checked').length; 
     checkboxes.filter(':not(:checked)').prop('disabled', current >= max); 
    }); 
}); 

如何修改上述脚本以限制一个表单中每个类别的三个复选框？

HTML示例：

<!-- FORM CODE --> 

<!-- Start Categories --> 

<label>Cat 1</label> 
    <!-- Checkboxes for Cat 1 - Max of Three in Category --> 
    <input type="checkbox" value="Option 1" id="CAT_Custom_365571_0" name="CAT_Custom_365571" />Creative<br /> 
    <input type="checkbox" value="Option 2" id="CAT_Custom_365571_1" name="CAT_Custom_365571" />Euphoric<br /> 
    <input type="checkbox" value="Option 3" id="CAT_Custom_365571_2" name="CAT_Custom_365571" />Uplifted<br /> 
    <!-- More checkboxes --> 
<label>Cat 2</label> 
    <!-- Checkboxes for Cat 2 - Max of Three in Category --> 
    <input type="checkbox" value="Option 1" id="CAT_Custom_365572_0" name="CAT_Custom_365572" />Option 1<br /> 
    <input type="checkbox" value="Option 2" id="CAT_Custom_365572_1" name="CAT_Custom_365572" />Option 2<br /> 
    <input type="checkbox" value="Option 3" id="CAT_Custom_365572_2" name="CAT_Custom_365572" />Option 3<br /> 
    <!-- More checkboxes --> 
<label>Cat 3</label> 
    <!-- Checkboxes for Cat 3 - Max of Three in Category --> 
    <input type="checkbox" value="Option 1" id="CAT_Custom_365573_0" name="CAT_Custom_365573" />Option 1<br /> 
    <input type="checkbox" value="Option 2" id="CAT_Custom_365573_1" name="CAT_Custom_365573" />Option 2<br /> 
    <input type="checkbox" value="Option 3" id="CAT_Custom_365573_2" name="CAT_Custom_365573" />Option 3<br /> 
    <!-- More checkboxes --> 

<!-- MORE FORM CODE --> 

注：CAT_Custom_365571_2等由CMS我使用生成的。

Answer 1

jQuery的

$("input[name=chk]").change(function(){ 
    var max= 3; 
    if($("input[name=chk]:checked").length == max){ 
     $("input[name=chk]").attr('disabled', 'disabled'); 
     $("input[name=chk]:checked").removeAttr('disabled'); 
    }else{ 
     $("input[name=chk]").removeAttr('disabled'); 
    } 
}); 

HTML

<input type="checkbox" name"chk" value="A"/>A 
<input type="checkbox" name"chk" value="B"/>B 
<input type="checkbox" name"chk" value="C"/>C 
<input type="checkbox" name"chk" value="D"/>D 
<input type="checkbox" name"chk" value="E"/>E 
<input type="checkbox" name"chk" value="F"/>F 
<input type="checkbox" name"chk" value="F"/>G 

FIDDLE EXAMPLE IS HERE

Answer 2

试试这个：

jQuery(function(){ 
    var max = 3; 
    var categories = jQuery('label'); // use better selector for categories 

    categories.each(function(){ 
     var checkboxes = $(this).find('input[type="checkbox"]'); 
     checkboxes.change(function(){ 
      var current = checkboxes.filter(':checked').length; 
      checkboxes.filter(':not(:checked)').prop('disabled', current >= max); 
     }); 
    }); 
}); 

Answer 3

尝试（如果你的标记匹配的小提琴之一）

jQuery(function(){ 
    var max = 3; 
    var checkboxes = jQuery('input[type="checkbox"]'); 

    checkboxes.click(function(){ 
     var $this = $(this); 
     var set = $this.add($this.prevUntil('label')).add($this.nextUntil(':not(:checkbox)')); 
     var current = set.filter(':checked').length; 
     return current <= max; 
    }); 
}); 

演示：Fiddle

更新：
既然你有一个名字复选框

jQuery(function(){ 
    var max = 3; 
    var checkboxes = jQuery('input[type="checkbox"]'); 

    checkboxes.click(function(){ 
     var $this = $(this); 
     var set = checkboxes.filter('[name="'+ this.name +'"]') 
     var current = set.filter(':checked').length; 
     return current <= max; 
    }); 
}); 

演示：​​

Answer 4

只需添加一个类，所有相关的复选框，并检查类别的复选框时，只使用类选择。 如：

HTML

<label>Cat 1</label> 
<input type='checkbox' class='cat1' /> 
<input type='checkbox' class='cat1' /> 
<input type='checkbox' class='cat1' /> 

<label>Cat 2</label> 
<input type='checkbox' class='cat2' /> 
<input type='checkbox' class='cat2' /> 
<input type='checkbox' class='cat2' /> 
... 

JS

jQuery(function(){ 
    var max = 3; 

    var cat1_checkboxes = jQuery('input.cat1[type="checkbox"]'); 
    var cat2_checkboxes = jQuery('input.cat2[type="checkbox"]'); 
    var cat3_checkboxes = jQuery('input.cat3[type="checkbox"]'); 


    cat1_checkboxes.change(function(){ 
     var current = cat1_checkboxes.filter(':checked').length; 
     checkboxes.filter(':not(:checked)').prop('disabled', current >= max); 
    }); 

    cat2_checkboxes.change(function(){ 
     var current = cat2_checkboxes.filter(':checked').length; 
     checkboxes.filter(':not(:checked)').prop('disabled', current >= max); 
    }); 

    cat3_checkboxes.change(function(){ 
     var current = cat3_checkboxes.filter(':checked').length; 
     checkboxes.filter(':not(:checked)').prop('disabled', current >= max); 
    }); 

}); 

Answer 5

这是新手代码与JavaScript。这就像工作...几乎... 我在每个输入上调用这个函数。 但是肯定有一种方法可以一次调用这个函数。 它正在工作，但取消了一个随机的复选框。

<input type="checkBox" name="cat1" value="education" onClick="just2cat();">Education 
    <input type="checkBox" name="cat2" value="faith" onClick="just2cat();">Religions 
    <input type="checkBox" name="cat3" value="news" onClick="just2cat();">News 



    function just2cat() 
     { 
      var allInp = document.getElementsByTagName('input'); 
      const MAX_CHECK_ = 2; /*How many checkbox could be checked*/ 
      var nbChk =0; 
      for(var i= 0; i<allInp.length; i++) 
      { 
       if(allInp[i].type.toLowerCase()=='checkbox' && allInp[i].checked) /*OR 
       if(allInp[i].type.toLowerCase()=='checkbox' && allInp[i].checked===true) */ 
       { 
        nbChk++; 

        if(nbChk > MAX_CHECK_) 
        { 
         alert("At most 2 categories can be chosen"); 
         allInp[i].checked=false; /* try to Unchek the current checkbox :'( */ 
        } 

       } 
      } 
     }