Home/ Questions/Q 7938377
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T22:47:52+00:00

edit: What is not working:- i have a two columns (approve all/reject all) how

  • 0

edit:
What is not working:- i have a two columns (approve all/reject all) how can i restrict the user to allow only one checkbox of each? the below code works if you dont use the gridview….

i have asked this question here (Allow only one (approve/reject) checkbox to be checked ) and its working as expected only if i have asp.net control meaning without using the gridview control and now i’m in a situation where i have to use the gridview control and seems my code does not work… i have maintained the same class names. any help?

here is my .aspx code with 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It is all to do with how controls are rendered to the browser. So based on that you will need to modify the jQuery element selectors. In the case with your GridView what is happening is that instead of C1All and C2All it is now gv_C1All and gv_C2All. In the case of checkboxes, instead of replacing C1 with C2 and vise versa, this time you will need to replace the word Approve with Reject and vise versa. Here is the modified jQuery. Now it should work.

    I would suggest you to have a look at the page HTML in the browser so that you can figure out how controls are rendered (you can press function key F12 in InternetExplorer to view the Developer tools pane, where you can see the HTML tree)

     $(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");
        });
    });
});
    • 0