在第N次选择后阻止复选框勾选（允许来自同一类别的更多内容）

Question

我们在两列中有复选框（它们表示相同的类别，但订阅不同）

我们希望将选择限制为4.我们有一个jQuery代码，用于在用户选择4后禁用复选框选择。

但现在我们需要有以下逻辑：

• 允许用户从相同的行中选择两个值（也就是：订阅同一类别中的两个订阅），如果他们从同一行中选择了更多，则不计入我们的4限制。

因此，如果您查看以下截屏视频，我们希望能够选择第一个复选框（第1行）。

我们使用的代码是：

$("input:checkbox").click(function() {

  var bol = $("input:checkbox:checked").length >= 4;     
  $("input:checkbox").not(":checked").attr("disabled",bol);

});

已创建jsFiddle以反映当前的工作状态： http://jsfiddle.net/fFbLx/

随意根据需要为课程命名。

Answer 1

如果您将复选框包装在元素中，则可以使用jquery has选择器过滤器来检查已选中复选框的数量：

$("input:checkbox").click(function() {

  var bol = $(".myCheckboxWrapper:has(input:checkbox:checked)").length >= 4;     
  $("input:checkbox").not(":checked").attr("disabled",bol);

});

Answer 2

我认为你必须用LI对它们进行“分类”。因此，使用复选框计算LI's - 如果超过4，则禁用所有其他。

参见：http://jsfiddle.net/fFbLx/4/（也许给UL一个类，所以你可以使用选择器）

$("input:checkbox").click(function() {

  var counter = 0;
    $('li').each( function() {
        if($(this).find("input:checkbox:checked").length)
        {
            $(this).addClass('active');
            counter++;
        } else {
            $(this).removeClass('active');
        }
    });
  var bol = counter >= 4;     
  $('li').not('.active').find("input:checkbox").not(":checked").attr("disabled",bol);

});

Answer 3

试试这个http://jsfiddle.net/fFbLx/2/

  $("input:checkbox").click(function() {

     $(this).parent().find("input:checkbox:first").toggleClass("active");
     var bol = $("input:checkbox:checked").length >= 4;     
     $("input:checkbox").not(":checked,.active").attr("disabled",bol);

 });