Enable Or Disable TextBox On Checkbox Changed Event In The Same GridView Using JavaScript

Question

I am having a GridView on a webpage.In this gridview i have one Textbox & one CheckBox. If CheckBox is checked then TextBox Should be enable & if it is unchecked then TextBox should be disable using pure javascript.

Please help me to solve this problem. Thanks in advance.

<asp:GridView ID="grdBasicApproval" runat="server" AutoGenerateColumns="false" Width="90%"
                    CssClass="mGrid" DataKeyNames="EmpId">
                    <Columns>
                        <asp:TemplateField Visible="true" HeaderText="Remark">
                            <ItemTemplate>
                                <asp:TextBox ID="txtRemark" runat="server" Width="125px" TextMode="MultiLine" Style="resize: none"></asp:TextBox>
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:TemplateField>
                        <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="7%">
                            <HeaderTemplate>
                                <asp:CheckBox ID="chkHeader" runat="server" Text="All" onclick="CheckAll(this);"
                                    TextAlign="Left" />
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox ID="chkChild" runat="server" onclick="return Check_Click(this);" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

And my JavaScript Is as below :

$(document).ready(function () {
        try {
                            $("input[type=checkbox][id*=chkChild]").click(function () {
                if (this.checked) {
                    alert("Checked");
                    $(this).closest("tr", "").find("input[type=TextBox][id*=txtRemark]").attr("disabled", true);
                                        }
                else {
                    alert("UnChecked");
                    $(this).closest("tr", "").find("input[type=TextBox][id*=txtRemark]").attr("disabled", true);

                }
            });
        } catch (e) {
            alert(e);
        }
    });

helping you is not the problem. But the problem is how? you haven't posted your code so that we can help. We ain't going to write code for you. — Krunal Patil
– Krunal Patil, Commented Jul 1, 2014 at 9:39
After removing onclick="return Check_Click(this);" Still it is not working. — Anand Dhamne
– Anand Dhamne, Commented Jul 1, 2014 at 10:55
attr("disabled", true), both are true set one to false on click event — cracker
– cracker, Commented Jul 1, 2014 at 11:02
Hi Cracker.It does not make the textbox either enable or disable. — Anand Dhamne
– Anand Dhamne, Commented Jul 1, 2014 at 11:07

Adil · Accepted Answer · 2014-07-01 10:21:45Z

1

You can bind the event with checkbox in RowDataBound and pass the textbox to javascript function. In javascript function you can enable disable textbox.

Code behind

void CustomersGridView_RowDataBound(Object sender, GridViewRowEventArgs e)
{    
    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        CheckBox chkBox = (CheckBox)e.Row.FindControl("checkBoxId");
        TextBox textBox = (TextBox )e.Row.FindControl("textBoxId");
        chkBox.Attribute.Add("onclick", "EnableDisable(this, '" + textBox.ClientID + "');" );
    }    
}

Javascript

function EnableDisable(chkbox, textBoxId)
{
   document.getElementById(textBoxId).disabled = !chkbox.checked;  
}

edited Jul 1, 2014 at 10:21

answered Jul 1, 2014 at 10:14

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmed Alaa El-Din · Accepted Answer · 2014-07-01 09:47:17Z

0

You can use this code which check the checkbox and disable/enable the textbox relative to it

<asp:TextBox runat="server" ID="txt_Text1"></asp:TextBox>
<asp:CheckBox runat="server" ID="chk_Check" onclick="ChangeText();" />
 <script>
    function ChangeText() {
        var chkb = document.getElementById('<%= chk_Check.ClientID %>');
        if(chkb.checked)
           document.getElementById('<%= txt_Text1.ClientID %>').disabled = true;
        else
           document.getElementById('<%= txt_Text1.ClientID %>').disabled = false;
    }
 </script>

answered Jul 1, 2014 at 9:47

Ahmed Alaa El-Din

1,8331 gold badge16 silver badges21 bronze badges

Comments

cracker · Accepted Answer · 2014-07-01 10:07:10Z

0

Try Like

HTML

   <asp:CheckBox ID="CheckBox" runat="server" />

Javascript

$(document).ready(function() {
     $("input[type=text][id*=TextboxId]").attr("disabled", true);
     $("input[type=checkbox][id*=CheckBox]").click(function() {
     if (this.checked)
     $(this).closest("tr").find("input[type=text][id*=TextboxId]").attr("disabled", false);
     else
     $(this).closest("tr").find("input[type=text][id*=TextboxId]").attr("disabled", true);
     });
});

edited Jul 1, 2014 at 10:07

answered Jul 1, 2014 at 9:45

cracker

4,9043 gold badges26 silver badges41 bronze badges

2 Comments

cracker Over a year ago

you can try visaversa for both.

Anand Dhamne Over a year ago

$(document).ready(function () {try {$("input[type=checkbox][id*=chkChild]").click(function () {if (this.checked) { $(this).closest("tr","").find("input[type=TextBox][id*=txtRemark]").attr("disabled", true); } else { $(this).closest("tr", "").find("input[type=TextBox][id*=txtRemark]").attr("disabled", true); //document.getElementById('txtRemark').disabled = false; //Enable True. } }); } catch (e) { alert(e); } });

Collectives™ on Stack Overflow

Enable Or Disable TextBox On Checkbox Changed Event In The Same GridView Using JavaScript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related