CODEWITHSUNDEEP
asp.net
Nick Kahn
Nick Kahn

Reputation: 20078

Select only one checkbox for a given row in mulitple selection - jQuery

in the below gridview i have two checkboxs 1) approve and 2) reject
my question is: how can i restrict the user to select only one checkbox for a given row which is approve or reject? NOT both.

  <asp:GridView ID="routePlanGridView" runat="server" AutoGenerateColumns="False" >        
            <Columns>          
             <HeaderTemplate>[Select All]<br />
                <asp:CheckBox ID="chkApproveAll" runat="server" onclick="SelectAll(this, '.selectapprove'); " />
            </HeaderTemplate>
             <asp:TemplateField HeaderText="approve">
                <ItemTemplate> 
                    <div class="selectreason">
                        <asp:CheckBox CssClass="selectme" ID="chkapprove" runat="server" Checked="false">
                        </asp:CheckBox>
                     </div>
                </ItemTemplate> 
            </asp:TemplateField>
            <asp:TemplateField HeaderText="reject">
 <HeaderTemplate>[Select All]<br />
                <asp:CheckBox ID="chkRejectAll" runat="server" onclick="SelectAll(this, '.selectreject'); " />
            </HeaderTemplate>

                <ItemTemplate> 
                    <div class="selectreason">
                        <asp:CheckBox CssClass="selectme" ID="chkreject" runat="server" Checked="false">
                        </asp:CheckBox>
                     </div>
                </ItemTemplate> 
            </asp:TemplateField>
            </Columns>
        </asp:GridView>

Upvotes: 0

Views: 3080

Answers (3)

Nilish
Nilish

Reputation: 1076

Mark Up

<asp:GridView ID="routePlanGridView" runat="server" AutoGenerateColumns="False">
    <Columns>
        <headertemplate>[Select All]<br />
                <asp:CheckBox ID="chkApproveAll" runat="server" onclick="SelectAll(this, '.selectapprove'); " />
            </headertemplate>
        <asp:TemplateField HeaderText="approve">
            <ItemTemplate>
                <div class="selectreason">
                    <asp:CheckBox CssClass="selectme" onclick="return SelectSingle(this);" ID="chkapprove" runat="server" Checked="false">
                    </asp:CheckBox>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="reject">
            <HeaderTemplate>
                [Select All]<br />
                <asp:CheckBox ID="chkRejectAll" runat="server" onclick="SelectAll(this, '.selectreject'); " />
            </HeaderTemplate>
            <ItemTemplate>
                <div class="selectreason">
                    <asp:CheckBox CssClass="selectme" ID="chkreject" runat="server" onclick="return SelectSingle(this);" Checked="false">
                    </asp:CheckBox>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

JavaScript

<script language="javascript" type="text/javascript">
    function SelectSingle(CtlId) {
        debugger;
        var chkreject, chkapprove;
        if (CtlId.id.indexOf('chkreject') > -1) {
            chkreject = document.getElementById(CtlId.id).checked;
            chkapprove = document.getElementById(CtlId.id.replace('chkreject', 'chkapprove')).checked;
        }
        else if (CtlId.id.indexOf('chkapprove') > -1) {
            chkapprove = document.getElementById(CtlId.id).checked;
            chkreject = document.getElementById(CtlId.id.replace('chkapprove', 'chkreject')).checked;
        }
        if (chkapprove == true && chkreject == true)
            alert('both checked');
        else
            alert('both not checked');
    }
 </script>

Upvotes: 0

Weavermount
Weavermount

Reputation: 746

If I understand how your form works you should be using Radio Buttons. They work exactly the way you want already. Also it will be more intuitive to your users.

[Edit]

Radio buttons have an extra attribute called "name" is used to put them into groups

Upvotes: 1

Esen
Esen

Reputation: 973

Use radio button instead of checkbox. In code behind on item created event find the radio button object and set different groupname per row. This will allow you to choose options per row not per column.

Upvotes: 0

Related Questions