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

<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

var max_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.

Facebook Official Page: All PHP Tricks

Twitter Official Page: All PHP Tricks