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(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;
    });
});

演示：Fiddle

Answer 2

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 3

试试这个：

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 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 :'( */ } } } }

限制复选框的数量

5 个答案: