Selecting Only Two Checkbox at a time in Gridview by using Jquery/Javascript

Question

User-582711651 posted

Hi, 

I have a requirement where I have a gridview with checkbox in it to select rows. I want the user to select two checkbox at a time, it means, user can select only two checkbox, when user try to select 3rd checkbox then need to show an Alert message like "Sorry! You can select two rows only". 

please ref my code.

<asp:GridView ID="Grv_VillageNames" runat="server" AutoGenerateColumns="False" CellPadding="4" CssClass="smalltext2" ForeColor="#333333">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="ChkRow" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-CssClass="hidecol"
HeaderStyle-CssClass="hidecol">
<HeaderStyle CssClass="hidecol" />
<ItemStyle CssClass="hidecol" />
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImgBtn_info" runat="server" ImageUrl="~/UserConsole_ICO/Info_48png.png" Height="18px" Width="17px" OnClick="ImgBtn_info_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ClusterName" HeaderText="ClusterName" />
<asp:BoundField DataField="VillageName" HeaderText="Village | Area Name" />

Thanks in advance.

Answer 1

User1535942433 posted

Hi ayyappan.CNN,

You could loop the gridview and count the number of checked checkboxes.

 <script>
        $(function () {
            $("#Grv_VillageNames input[type='checkbox']").click(function () {
                var count = 0;
                $("#Grv_VillageNames input[type='checkbox']").each(function () {
                    if ($(this).is(":checked")) {
                        count++;
                    }
                })
                if (count > 2) {
                    alert("Sorry! You can select two rows only");
                    $(this).attr("disabled", true);
                }
            })
        })
    </script>

Best regards,

Yijing Sun

Answer 2

User-582711651 posted

Hi, 

I changed a little bit, now it works well.

    <script type="text/javascript">
 			function CrowVali() {
                            $("#Grv_VillageNames input[type='checkbox']").click(function () {
                            var count = 0;
                            $("#Grv_VillageNames input[type='checkbox']").each(function () {
                                if ($(this).is(":checked")) {
                                    count++;
                                }
                            });
                            if (count > 2) {
                                alert("Sorry! You can select two rows only");
                                $(this).attr("checked", false);
                            }
                        });
                    }
    </script>

 

And Aspx code: 

<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="ChkRow" runat="server" onchange="CrowVali()" />
</ItemTemplate>
</asp:TemplateField>