Check restrickted number of checkboxes in asp.net Gridview jQuery

Toggle restrickted number of checkboxes in tbody td by clicking on the checkbox in thead in gridview or table in asp.net

by ravimallya

HTML

<table class="mGrid" id="ContentPlaceHolder1_grdInvited" style="border-collapse:collapse;" cellspacing="0">
    <tbody>
        <tr>
            <th scope="col" style="width:5.5%;">
                <input id="checkAll" name="ctl00$ContentPlaceHolder1$grdInvited$ctl01$chkHdrQtn" type="checkbox">
            </th>
            <th scope="col" style="width:12%;">Resume</th>
            <th class="AlignLeft" scope="col" style="width:14.5%;"><a href="#">Name</a>

            </th>
            <th class="AlignLeft" scope="col" style="width:38.5%;"><a href="#">Email</a>

            </th>
            <th class="AlignLeft" scope="col"><a href="#">Phone</a>

            </th>
            <th scope="col"><a href="#">Invited Date</a>

            </th>
        </tr>
        <tr>
            <td>
                <input id="ContentPlaceHolder1_grdInvited_chkSelect_0" name="ctl00$ContentPlaceHolder1$grdInvited$ctl02$chkSelect" onclick="checkSelect(this);" type="checkbox" class="selectMe">
            </td>
            <td>
                <div id="ContentPlaceHolder1_grdInvited_UpdatePanel2_0">
                    <input name="ctl00$ContentPlaceHolder1$grdInvited$ctl02$imgInvitedIcon" id="ContentPlaceHolder1_grdInvited_imgInvitedIcon_0" disabled="disabled" title="Resume not uploaded" class="aspNetDisabled" src="http://placehold.it/30x30/" type="image">
                </div>
            </td>
            <td class="AlignLeft"> <a id="ContentPlaceHolder1_grdInvited_lBtnEditCandidate_0" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdInvited$ctl02$lBtnEditCandidate','')">fgfdg</a>

            </td>
            <td class="AlignLeft"> <span id="ContentPlaceHolder1_grdInvited_lblEmail_0">[email protected]</span>

            </td>
            <td class="AlignLeft"> <span id="ContentPlaceHolder1_grdInvited_lblPhone_0"></span>

            </td>
            <td>27 Nov 13</td>
        </tr>
        <tr class="alt">
            <td>
                <input...

JavaScript

$(function () {
    // Just pass the gridview id or class name where it has checkbox in header as well as in each row. Also, define num to restrict maximum number of checkboxes, that needed to be checked.
    var grd = $('.mGrid');
    var num = 4;
    var count = 0;
    var headChk = grd.find('th>input:checkbox');
    var checks = grd.find('td>input:checkbox');
    $(headChk).change(function () {
        if ($(headChk).is(':checked')) {
            for (i = 0; i < num; i++) {
                $(checks[i]).prop("checked", true);
            }
        } else {
            $(checks).prop("checked", false);
        }
    });
    // to check or uncheck top selector
    $(checks).change(function () {
        var bol = grd.find("td>input:checkbox:checked");
        var b = grd.find("td>input:checkbox");
        var a = bol.length;
        var c = (b.length);
        if (a > num) {
            alert("Can't select more than " + num + " items");
            $(this).prop("checked", false);
        } else if (a == num) {
            $(headChk).prop("checked", true);
        } else {
            $(headChk).prop("checked", false);
        }
    });
});