jQuery Checkbox Validation – Limiting Checkboxes To Be Checked

Sometimes you are required to limit the checkboxes to be checked. For this purpose here is a very simple tutorial that will help you to limit the checkboxes selection using jQuery. In my tutorial i have applied limitation at maximum 3 (three) checkboxes, which means you can select any three checkboxes, you can change this number of limit.

Note: Don’t forget to include the jQuery library in the header or footer of web page.

HTML

1

2

3

4

5

6

7

8

9

10

<input type="checkbox"class="game" />

Cricket<br />

<input type="checkbox"class="game" />

Football<br />

<input type="checkbox"class="game" />

Tennis<br />

<input type="checkbox"class="game" />

Baseball<br />

<input type="checkbox"class="game" />

Soccer

JQuery

1

2

3

4

5

6

7

8

9

10

varmax_limit=3;// Max Limit

$(document).ready(function(){

$(".game:input:checkbox").each(function(index){

this.checked=(".game:input:checkbox"<max_limit);

}).change(function(){

if($(".game:input:checkbox:checked").length>max_limit){

this.checked=false;

}

});

});

Add the above jQuery in your web page footer.

If you found this tutorial helpful so kindly share it with your friends and leave your comment.