Javascript 如何限制用户在Gridview中仅选中3个复选框？

我有一个gridview，它有一堆行，第一列包含项目模板中的复选框。我希望用户最多只选择3个不同的复选框。如果他们选择第四个复选框，则选择将被拒绝/撤消/等等。如果他们尝试选中第四个复选框，我想弹出一条消息，告诉他们有关限制的信息

这是我的表格：

<asp:GridView ID="gv_pain" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" DataSourceID="ds_grid_pain"  ForeColor="Black" GridLines="Vertical" style="text-align: left; font-size: x-small; ">
                        <AlternatingRowStyle BackColor="#CCCCCC" />
                        <Columns>
                            <asp:TemplateField HeaderText="Select">
                                <ItemTemplate>
                                    <asp:CheckBox ID="CheckBoxPain" runat="server" onclick="CheckCheckBoxes()" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="DrugID" InsertVisible="False" SortExpression="DrugID">
                                <EditItemTemplate>
                                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("DrugID") %>'></asp:Label>
                                </EditItemTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lbl_DrugID" runat="server" Text='<%# Bind("DrugID") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="NickName" HeaderText="NickName" SortExpression="NickName" ItemStyle-Width="150px">
                            <ItemStyle Wrap="False" />
                            </asp:BoundField>
                            <asp:BoundField DataField="DrugName" HeaderText="DrugName" SortExpression="DrugName" ItemStyle-Width="500px">
                            <ItemStyle Wrap="False" />
                            </asp:BoundField>
                            <asp:BoundField DataField="Quan1" HeaderText="Quan1" SortExpression="Quan1">
                            <ItemStyle Wrap="False" />
                            </asp:BoundField>
                            <asp:BoundField DataField="Quan2" HeaderText="Quan2" SortExpression="Quan2">
                            <ItemStyle Wrap="False" />
                            </asp:BoundField>
                        </Columns>
                        <FooterStyle BackColor="#CCCCCC" />
                        <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                        <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                        <SortedAscendingCellStyle BackColor="#F1F1F1" />
                        <SortedAscendingHeaderStyle BackColor="#808080" />
                        <SortedDescendingCellStyle BackColor="#CAC9C9" />
                        <SortedDescendingHeaderStyle BackColor="#383838" />
                    </asp:GridView>

---

有了jquery，你可以和。我看到了那个帖子。。。但是我的复选框是asp:CheckBox。我不能让它工作。想法？可能是您的复选框id被ASP.net更改了。此链接介绍了一种变通方法。你是在建议我添加带有ClientID的javascript吗？我试过了，只是编辑了我的帖子来反映我的尝试…用jquery你可以，我看到了那篇帖子。。。但是我的复选框是asp:CheckBox。我不能让它工作。想法？可能是您的复选框id被ASP.net更改了。此链接介绍了一种变通方法。你是在建议我添加带有ClientID的javascript吗？我试过了，只是编辑了我的帖子来反映我的尝试。。。

<script type="text/javascript">
    function checkCheckedCount(objChk) {
        var objHf = document.getElementById('<%=hfChkCount.ClientID %>')
        if (objChk.checked == true) {
            if (objHf.value >= 5) {
                alert('You cannot select more than 5 items.');
                objChk.checked = false;
            }
            else { objHf.value = parseInt(objHf.value) + 1; }
        }
        else { objHf.value = parseInt(objHf.value) - 1; }
    }
</script>