CODEWITHSUNDEEP
javascriptjquery
markatte team
markatte team

Reputation: 235

how to limit the checkbox checked using icheck jquery plugin?

How to limit the checkbox checked using iCheck jquery plugin. Please check wiht jsfiddle

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

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

Upvotes: 0

Views: 945

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

DEMO

Add an ifChecked event to all the checkbox with its common class i.e. .men_checkbox and check whether checked checkbox length is greater than or equal to limit which is a global variable as below:

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'); 
    }
});

UPDATE

To display an alert you just need to prevent its default action using e.preventDefault() and display the alert. Check below code and this 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);
    }
});

Upvotes: 2

Related Questions