限制要检查的复选框的数量 jQuery

Question

我有一个包含多组复选框的网页（在每个组中，所有复选框共享同一个类）。 我不仅想限制可以检查的复选框的数量，还想限制以下内容 - 如果要检查的复选框的最大数量为 3，并且用户检查了第 4 个复选框，而不是显示消息，我想取消选择时间最长的复选框。考虑到我有多组复选框并且每组都有不同的最大允许复选框数，这是如何实现的？

顺便说一句，我没有使用 jQuery UI 复选框元素。

谢谢！

Answer 1

首先，你必须：

1. 将事件附加到这些复选框
2. 存储有关检查时间的信息
3. 如果选中的复选框是第四个，找到第一个复选框并取消选中它

您可以使用 jQuery 的以下功能：

• .delegate()、.change()、.live() 或 .bind() 附加事件，
• data- 用于存储 JS 时间戳的 HTML 属性（例如，您可以拥有 <input type="checkbox" data-checked="1310950561097" />），
• .parents()选择复选框组的容器，
• jQuery 的.each() 函数遍历同一组内所有选中的复选框（上述相同的容器），

通过使用这些功能，您应该可以实现您所需要的。

Answer 2

要将事件附加到一组复选框，您可以使用 jQuery 的 delegate 方法，如下所示：

$('#checkbox-container').delegate('checkbox', 'change', function (event) {
  // event.target is the clicked checkbox element here
});

Answer 3

我对这个问题的第一个想法是：

var checkorder = [];
$('input:checkbox.checkboxes').click(
    function(){
        checkorder.push($(this).index('input:checkbox'));
        if (checkorder.length > 3){
            $('input:checkbox.checkboxes').eq(checkorder[0]).removeProp('checked');
            checkorder.splice(0,1);
        }
    });

JS Fiddle demo.

这种方法的问题：

1. 它将选择应用于所有具有相同class 的复选框。
2. 不区分单击以选中或取消选中复选框。

---

参考资料：

• :checkbox-selector.
• push()。
• index()。
• eq()。
• removeProp()。
• splice()。