Question

修改什么是无效的： - 我有两列（批准所有/拒绝所有）我如何限制用户只允许每个的一个复选框？如果您不使用gridview，则以下代码有效....

我在这里问了这个问题（Allow only one (approve/reject) checkbox to be checked），如果我没有使用gridview控件就有asp.net控制意义，那么它按预期工作现在我处于某种情况我必须使用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>

Answer 1

这与控件如何呈现给浏览器有关。因此，基于此，您将需要修改jQuery元素选择器。如果您的GridView发生的事情是C1All和C2All而不是gv_C1All和gv_C2All。对于复选框，不要将C1替换为C2，反之亦然，这次您需要将Approve替换为Reject，反之亦然。这是修改过的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");
        });
    });
});

如何使这个jQuery代码与GridView控件一起使用

1 个答案: