Question

如何使用iCheck jquery插件限制复选框。请检查jsfiddle

$('input').iCheck({
    checkboxClass: 'icheckbox_flat-green',
    radioClass: 'iradio_flat-green',
    labelHover: true,   
    });
});

https://jsfiddle.net/s9916jpy/2/

Answer 1

<强> DEMO

将ifChecked事件添加到所有checkbox及其公共类.men_checkbox，并检查checked checkbox长度是否大于或等于limit是一个全局变量，如下所示：

var limit=4; //change according to your need

$(".men_checkbox").on("ifChecked",function(){
    var checkboxes = $("input:checkbox");//get all the checkbox
    if (checkboxes.filter(":checked").length >= limit) { 
         //if limit is reached disbaled all except checked and #man7
         //else put an alert here instead of below lines.
         checkboxes.not(":checked,#man7").iCheck('disable'); 
    } else {
         //else enable it all
         checkboxes.not(":checked").iCheck('enable'); 
    }
});

<强>更新

要显示alert，您只需使用e.preventDefault()阻止其默认操作，并显示alert。请检查以下代码和 DEMO

$(".men_checkbox").on("ifChecked",function(e){
    var checkboxes = $("input:checkbox");
    var $this=$(this);
    if (checkboxes.filter(":checked").length > limit) { 
        alert('Max limit reached');
        setTimeout(function(){
            $this.iCheck('uncheck');
        },1);
    }
});

如何限制使用icheck jquery插件检查的复选框？

1 个答案: