javascript - 将复选框限制为仅三个复选框 - 如何？

Question

我的表单上有很多复选框。我需要将总数限制为选中的三个复选框，不能再多了。我的代码可以工作，但我刚刚将我的表单升级到基础自定义表单，我的脚本不再工作，我无法让它工作。

如何重写脚本才能工作？

这是当前脚本:

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

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

这里是表单代码:

<label>Effects <span class="red">required</span></label>
   <label for="CAT_Custom_365571_0"><input type="checkbox" value="Creative" id="CAT_Custom_365571_0" name="CAT_Custom_365571" style="display: none;">
<span class="custom checkbox"></span> Creative</label>
   <label for="CAT_Custom_365571_1"><input type="checkbox" value="Euphoric" id="CAT_Custom_365571_1" name="CAT_Custom_365571" style="display: none;">
<span class="custom checkbox"></span> Euphoric</label>
   <label for="CAT_Custom_365571_2"><input type="checkbox" value="Uplifted" id="CAT_Custom_365571_2" name="CAT_Custom_365571" style="display: none;">
<span class="custom checkbox"></span> Uplifted</label>
   <label for="CAT_Custom_365571_3"><input type="checkbox" value="Energetic" id="CAT_Custom_365571_3" name="CAT_Custom_365571" style="display: none;">
<span class="custom checkbox"></span> Energetic</label>
   <label for="CAT_Custom_365571_4"><input type="checkbox" value="Lazy" id="CAT_Custom_365571_4" name="CAT_Custom_365571" style="display: none;">
<span class="custom checkbox"></span> Lazy</label>
   <label for="CAT_Custom_365571_5"><input type="checkbox" value="Focused" id="CAT_Custom_365571_5" name="CAT_Custom_365571" style="display: none;">
<span class="custom checkbox"></span> Focused</label>
<!-- MORE CHECKBOXES -->

显然，当我更改表单时，我破坏了脚本。我该如何解决这个问题？

Answer 1

我会考虑包装(如果您还没有)复选框并使用委托(delegate)来提高性能。

假设元素已被 id 为 wrap 的元素包裹:

$(function () {
    var max = 3;
    $('#wrap').on('click', 'input[type="checkbox"]', function(){
        return $(this).closest('#wrap').find(':checked').length <= max;
    });
});

这是一个 fiddle 。