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

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;  
}

Solution 2:

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>

Solution 3:

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);
     });
});