Question

我在表单上有很多复选框。我需要将总数限制为三个复选框，而不是更多。我的代码有效，但我刚刚将表单升级为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 -->

显然，当我改变表格时，我打破了剧本。我该如何解决这个问题？

Answer 1

我会考虑包装（如果你还没有）复选框并使用委托来表现。

假设元素已被ID为wrap的元素包裹：

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

这是 fiddle 。

Answer 2

Fiddle DEMO

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

您可以更改以上代码

Fiddle DEMO

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

<小时/> 参考

Attribute Starts With Selector [name^="value"]

.prop()

.filter()

.change()

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

2 个答案: