Enable Or Disable Textbox On Checkbox Changed Event In The Same Gridview Using Javascript

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 TextB

Solution 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

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

Javascript

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

Solution 2:

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

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

Solution 3:

Try Like

HTML

<asp:CheckBoxID="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);
     });
});