使用 iCheck 限制选中复选框的数量答案

【问题标题】：Limit number of checked checkboxes using iCheck使用 iCheck 限制选中复选框的数量
【发布时间】：2013-09-19 23:38:29
【问题描述】：

我正在使用 iCheck 来设置复选框的样式，但我在使用它时遇到了麻烦。基本上我需要允许一次选中 3 个复选框，并防止选中更多的复选框。

我试过用这个：

$("#modal1").on("change", function()
{
  var limit = 3,
      checkboxes = $(this).find("input:checkbox"),
      valid = checkboxes.filter(":checked").length >= limit;

    checkboxes.not(":checked").attr("disabled", valid);
    $('input').iCheck('update');
});

它在没有 iCheck 的情况下工作，如下所示，但我无法让 iCheck 更新。

http://jsfiddle.net/hUdrF/4/

【问题讨论】：

标签： jquery checkbox icheck

【解决方案1】：

我添加了.on("ifToggled"加上SpaceDog的代码，解决了这个问题。

$("#modal1").on("ifToggled", function() {
    checkboxes = $(this).find("input:checkbox");  
    if (checkboxes.filter(":checked").length >= 3) { 
        checkboxes.not(":checked").iCheck('disable'); 
    } else { 
        checkboxes.not(":checked").iCheck('enable');
    } 
});

【讨论】：

【解决方案2】：

看起来 iCheck 更新方法没有看到对 disabled 属性的更改。您可以尝试使用原生 iCheck 方法来禁用复选框：

if (checkboxes.filter(":checked").length >= limit) { 
    checkboxes.not(":checked").iCheck('disable'); 
} else {
    checkboxes.not(":checked").iCheck('enable'); 
}

【讨论】：

嗯，这看起来对吗？ $("#modal1").on("change", function() { var limit = 3 checkboxes = $(this).find("input:checkbox") if (checkboxes.filter(":checked").length >= limit) { checkboxes.not(":checked").iCheck('disable'); } else { checkboxes.not(":checked").iCheck('enable'); } });
看起来不错，尽管我将分号放入以显示命令的结尾。 $("#modal1").on("change", function() { var limit = 3; checkboxes = $(this).find("input:checkbox"); if (checkboxes.filter(":checked").length >= limit) { checkboxes.not(":checked").iCheck('disable'); } else { checkboxes.not(":checked").iCheck('enable'); } });

【解决方案3】：

对代码进行一些更改

    $("#modal1").on("change", function()
    {
    var limit = 2;
    $('.check').on('ifChanged', function(event) {
        checkboxes = $('.icheck-list').find("input:checkbox");
        if (checkboxes.filter(":checked").length >= limit) {
            checkboxes.not(":checked").iCheck('disable');
        } else {
            checkboxes.not(":checked").iCheck('enable');
        }
    });
    });

【讨论】：