Jquery how to count checked and disable checkboxes

Question

I am trying to disable all unchecked checkboxes when there are 5 checked checkboxes.

My code is not working here it is: http://jsfiddle.net/mtYtW/18/

My Jquery:

Answer 1

The following should do the trick for your needs:

$("table input[type=checkbox]").click(function(){
var countchecked = $("table input[type=checkbox]:checked").length;

if(countchecked >= 5) 
{
    $('table input[type=checkbox]').not(':checked').attr("disabled",true);
}
else
{
    $('table input[type=checkbox]').not(':checked').attr("disabled",false);
}

});

Example for your needs

(Generic) The following will disable all of your unchecked checkboxes:

$('input[type=checkbox]').not(':checked').attr("disabled","disabled");

Generic Disable Example

Answer 2

Take a look at this

http://jsfiddle.net/mtYtW/33/

Answer 3

Your code was close, with a few major issues.

http://jsfiddle.net/mtYtW/37/

$(function() {
    $('table input[type="checkbox"]').change(function() {
        var countchecked = $('table input[type="checkbox"]').filter(":checked").length

        if (countchecked >= 5) {
            $("table input:checkbox").not(":checked").attr("disabled", true);
        }else{
            $("table input:checkbox").attr("disabled", false);
        }
    });
});

The biggest, you had your code only executing onload. You need to execute it any time one of the checkboxes is checked, that is this part:

$('table input[type="checkbox"]').change(function() {

You had a misspelled variable name countcheck did not exist, it was countchecked.

You were using find when you really wanted filter. Find will search in the descendants of the elements in your set, you wanted to filter them.

You had > 5 when you stated you wanted to disable AT 5. So it should be >=.

You were disabling ALL checkboxes, not just the unchecked as you stated, I added .not(":checked").

And finally, I figured you would probably want to re-enable them if one was unchecked, so I added:

}else{
    $("table input:checkbox").attr("disabled", false);
}

Answer 4

$("table input[type=checkbox]").click(function(){
    var countchecked = $("table input[type=checkbox]:checked").length;
    if(countchecked >= 5) {
        $("table input:checkbox").attr("disabled", true);
    }else{

    }
});

Working example: http://jsfiddle.net/Re5uy/6/

Answer 5

I guess you want to disable the rest of the check boxes once the checked checkboxes count gets more than 5.If that is the case try this:

$('table input[type="checkbox"]').click(function(){
    var countchecked = $('table input[type="checkbox"]').filter(":checked").length;

    if(countchecked > 4) {
        $("table input:checkbox").not(":checked").attr("disabled", true);
    } else {}
});

Working example: http://jsfiddle.net/mtYtW/30/

If you want to disable the checkboxes on the page load and verify if there are more than 5 checkboxes that are checked then try this:

$(function(){
    var countchecked = $('table input[type="checkbox"]').filter(":checked").length;

    if(countchecked > 4) {
        $("table input:checkbox").not(":checked").attr("disabled", true);
    } else {}
});

Answer 6

$('table input[type="checkbox"]').click(function(){
    var countcheck = $('table input[type="checkbox"]:checked').length;
    if(countcheck > 4) {
        $("table input:checkbox:not(:checked)").attr("disabled", true);
    }else
    {
        $("table input:checkbox").attr("disabled", false);
    }
});

Working Example: http://jsfiddle.net/mtYtW/48/

NOTE: This code will enable the checkboxes if you deselect one of the five!