javascript - 限制选中的复选框数量

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

尝试(如果您的标记与 fiddle 中的标记匹配)

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