如何使此 jQuery 代码与 GridView 控件一起使用答案

【问题标题】：How to make this jQuery code works with GridView control如何使此 jQuery 代码与 GridView 控件一起使用
【发布时间】：2012-05-15 19:05:34
【问题描述】：

编辑： 什么不起作用：-我有两列（全部批准/全部拒绝）我如何限制用户只允许每个复选框？如果你不使用gridview，下面的代码可以工作......

我已经在这里问过这个问题 (Allow only one (approve/reject) checkbox to be checked) 并且它按预期工作仅如果我有 asp.net 控件含义而不使用 gridview 控件并且现在我处于我的情况必须使用 gridview 控件，似乎我的代码不起作用......我保持了相同的类名。有什么帮助吗？

这是我的带有 gridview 的 .aspx 代码：

<script type="text/javascript" language="javascript">

         $(document).ready(function () {
             $('#C1All').click(function () { debugger
                 $('.col1 > input').attr("checked", $('#C1All').attr("checked"));
                 $('.col2 > input').removeAttr("checked");
                 $('#C2All').removeAttr("checked");
             });

             $('#C2All').click(function () { debugger
                 $('.col2 > input').attr("checked", $('#C2All').attr("checked"));
                 $('.col1 > input').removeAttr("checked");
                 $('#C1All').removeAttr("checked");
             });

             $('.col1').each(function () { 
                 $(this).click(function () { debugger
                     var id = $("input", this).attr('id');
                     var coresId = id.replace('C1', 'C2');
                     $('#' + coresId).removeAttr("checked");
                     $('#C1All').removeAttr("checked");
                     $('#C2All').removeAttr("checked");
                 });
             });

             $('.col2').each(function () { 
                 $(this).click(function () {debugger
                     var id = $("input", this).attr('id');
                     var coresId = id.replace('C2', 'C1');
                     $('#' + coresId).removeAttr("checked");
                     $('#C1All').removeAttr("checked");
                     $('#C2All').removeAttr("checked");
                 });
             });
         });

  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataKeyNames="Id"
        OnRowDataBound="gv_RowDataBound">
        <Columns>
         <asp:TemplateField HeaderText="Approve" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px" >
            <HeaderTemplate>
                Approve<br />
                <asp:CheckBox ID="C1All" runat="server"  />
            </HeaderTemplate>
            <ItemStyle HorizontalAlign="Center" />
            <ItemTemplate   >
                <asp:CheckBox CssClass="col1" ID="chkApprove" runat="server"  >
                </asp:CheckBox>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Center" />
        </asp:TemplateField>
         <asp:TemplateField HeaderText="Reject" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="180px">
            <HeaderTemplate>
                Reject<br />
                <asp:CheckBox ID="C2All"  runat="server"  />
                 <asp:DropDownList ID="drpPaymentMethod" runat="server">
                        <asp:ListItem Value="-1">Please select</asp:ListItem>
                        <asp:ListItem Value="0">Month</asp:ListItem>
                        <asp:ListItem Value="1">At End</asp:ListItem>
                        <asp:ListItem Value="2">At Travel</asp:ListItem>
                    </asp:DropDownList>
            </HeaderTemplate>
            <ItemStyle HorizontalAlign="Center" />
            <ItemTemplate> 
                <div class="selectReason">
                    <asp:CheckBox CssClass="col2"  ID="chkReject" runat="server" >
                    </asp:CheckBox>
                     <asp:DropDownList ID="drpPaymentMethod" runat="server">
                        <asp:ListItem Value="-1">Please select</asp:ListItem>
                        <asp:ListItem Value="0">Month</asp:ListItem>
                        <asp:ListItem Value="1">At End</asp:ListItem>
                        <asp:ListItem Value="2">At Travel</asp:ListItem>
                    </asp:DropDownList>
                </div>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Center" />
        </asp:TemplateField>
            <asp:BoundField DataField="ID" ControlStyle-Width="250px" HeaderText="ID" SortExpression="ID" />
            <asp:BoundField DataField="FirstName" ControlStyle-Width="250px" HeaderText="FirstName"
                SortExpression="FirstName" />
            <asp:BoundField DataField="LastName" ControlStyle-Width="250px" HeaderText="LastName"
                SortExpression="LastName" />
            <asp:TemplateField>

            </asp:TemplateField>

        </Columns>
    </asp:GridView>

    </div>
    </form>
</body>
</html>

【问题讨论】：

什么不起作用？您是否收到错误消息？您是否遇到意外行为？
查看您之前的问题，Stuart link 提出了一个很好的建议，即您使用单选按钮而不是复选框。这不是一种选择吗？

标签： jquery asp.net gridview

【解决方案1】：

这与控件如何呈现给浏览器有关。因此，基于此，您将需要修改 jQuery 元素选择器。在您的GridView 的情况下，正在发生的事情是C1All 和C2All 现在是gv_C1All 和gv_C2All。在复选框的情况下，不是用C2 替换C1，反之亦然，这次您需要用Reject 替换单词Approve，反之亦然。这是修改后的 jQuery。现在它应该可以工作了。

我建议您在浏览器中查看页面 HTML，以便了解控件的呈现方式（您可以在 InternetExplorer 中按功能键 F12 以查看开发人员工具窗格，您可以在其中看到 HTML树）

 $(document).ready(function () {
    $('#gv_C1All').click(function () {
        $('.col1 > input').attr("checked", $('#gv_C1All').attr("checked"));
        $('.col2 > input').removeAttr("checked");
        $('#gv_C2All').removeAttr("checked");
    });

    $('#gv_C2All').click(function () {
        $('.col2 > input').attr("checked", $('#gv_C2All').attr("checked"));
        $('.col1 > input').removeAttr("checked");
        $('#gv_C1All').removeAttr("checked");
    });

    $('.col1').each(function () {
        $(this).click(function () {
            var id = $("input", this).attr('id');
            var coresId = id.replace('Approve', 'Reject');
            $('#' + coresId).removeAttr("checked");
            $('#gv_C1All').removeAttr("checked");
            $('#gv_C2All').removeAttr("checked");
        });
    });

    $('.col2').each(function () {
        $(this).click(function () {
            var id = $("input", this).attr('id');
            var coresId = id.replace('Reject', 'Approve');
            $('#' + coresId).removeAttr("checked");
            $('#gv_C1All').removeAttr("checked");
            $('#gv_C2All').removeAttr("checked");
        });
    });
});

【讨论】：

谢谢 Prashanth，我现在正在学习 jquery...你知道任何好的网站吗，我知道谷歌可以获取大量网站，但你知道你推荐的任何网站吗？
你不必去任何地方； jquery.com 本身有很多资源。检查 jqueryui.com 以获取与 ui 相关的控件。你可以使用jsfiddle.net 来玩html/css/jquery。祝你好运