如何使此jQuery代碼與GridView控件一起使用

Question

編輯：什么不起作用：-我有兩列（全部批准/全部拒絕），我如何限制用戶只允許每個復選框使用一個復選框？ 如果您不使用gridview，則以下代碼有效。

我在這里問了這個問題（僅允許選中一個（批准/拒絕）復選框），並且僅當我具有asp.net控件的含義而不使用gridview控件並且現在我處於這種情況時，它才能按預期工作使用gridview控件，似乎我的代碼不起作用...我保持了相同的類名。 有什么幫助嗎？

這是我的.aspx代碼與gridview：

<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 。 對於復選框，這一次不是用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");
        });
    });
});

如何使此jQuery代碼與GridView控件一起使用

問題描述

1 個解決方案

解決方案1
0 已采納 2012-05-16 03:41:10

如何使此jQuery代碼與GridView控件一起使用

問題描述

1 個解決方案

解決方案1 0 已采納 2012-05-16 03:41:10

解決方案1
0 已采納 2012-05-16 03:41:10