0

我在表单上有很多复选框。我需要将总数限制为三个复选框，仅此而已。我有有效的代码，但我刚刚将我的表单升级到 Foundation Custom Forms，我的脚本不再工作，我无法让它工作。

如何重新编写脚本才能工作？

这是当前脚本：

$(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 -->

显然，当我更改表格时，我破坏了脚本。我该如何解决？

4

2 回答 2

2

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

假设元素已被具有 id 的元素包裹wrap：

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

这是一个小提琴。

于 2013-11-13T02:16:54.900 回答
1

小提琴演示

var $checkboxes = $('input[id^="CAT_Custom_365571"]');
var max = 3;
$checkboxes.show();
$checkboxes.change(function () {
    $(this).prop('checked', function () {
        if ($(this).is(':checked')) {
            return ($checkboxes.filter(':checked').length <= max) ? true : false;
        }
    });
});

你可以改变上面的代码

小提琴演示

var $checkboxes = $('input[name="CAT_Custom_365571"]');

参考

属性以选择器 [name^="value"] 开头

。支柱（）

。筛选（）

。改变（）

于 2013-11-13T02:09:49.387 回答