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

Question

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

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

谢谢！

Answer 1

首先，您必须：

1. 将事件附加到这些复选框，
2. 存储有关何时选中它们的信息，
3. 以防选中的复选框是第四个，找到第一个选中的复选框并取消选中它

的以下功能：

• 您可以使用jQuery >.delegate()、.change()、.live() 或 .bind() 附加事件，
• < code>data- 要存储的 HTML 属性JS 时间戳（例如，您可以使用 ）、
• .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. 它将选择应用于具有相同类的所有复选框。
2. 不区分单击以选中或取消选中复选框。

---

参考文献：

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