Jquery count elements on click with limit

Question

First, I have a set of checkbox elements, i want that every time i click on it there's a way to count how many checkboxes where active inside the form. Next, place a limit on how many checkboxes I want to check, if it reaches the limit then I want the remaining checkboxes disabled. Currently, jquery .length returns the total number of checkboxes.

btw, i'm using a custom javascript/css checkbox, but i think the idea is the same

Answer 1

In order to retrieve the number of checked checkboxes, .length works but on the selector input:checked :

var nbChecked = $("input:checked").length;

In order to limit the number of checked boxes, you have to bind change event to your checkboxes and prevent click when this number is reached...

Working jsFiddle : http://jsfiddle.net/wpMzY/

Answer 2

If you pasted the code you already have - we could advise further.

• To see how to check if the checkbox is checked look at : Check checkbox checked property using jQuery

• To see how to check / uncheck a checkbox : How do I check a checkbox with jQuery

• For enabling and disabling look at : JQuery - checkbox enable/disable

Answer 3

Full code example of what Samuel has answered, along with the option to allow the user to deselect his current option and pick a different option:

var maxAmountChecked = 3;

$('input[type=checkbox]').change(function(){
   if( $('input:checked').length > maxAmountChecked-1 ){
       //disable all unchecked checkboxes, keeping checked boxes available to deselect
       $('input:checkbox:not(:checked)').attr('disabled', 'disabled');
   }else{
       //if maximum amount is not reached, all checkboxes should be available
       $('input[type=checkbox]').removeAttr("disabled");
   }
});