11

Can anyone please tell me how to disable a textbox, if a checkbox is checked, and enable textbox if the checkbox is not checked?

7 Answers 7

51

Put this in the checkbox:

onclick="document.getElementById('IdOfTheTextbox').disabled=this.checked;"
Sign up to request clarification or add additional context in comments.

Comments

18
    <input type="text" id="textBox">
    <input type="checkbox" id="checkBox" onclick="enableDisable(this.checked, 'textBox')">
    <script language="javascript">
    function enableDisable(bEnable, textBoxID)
    {
         document.getElementById(textBoxID).disabled = !bEnable
    }
</script>

Comments

5
jQuery(document).ready(function () {
   $("#checkBox").click(function () {
      $('#textBox').attr("disabled", $(this).is(":checked"));
   });
});

Comments

2

Create a Javascript function like this:

function EnableTextbox(ObjChkId,ObjTxtId)
{

    if(document.getElementById(ObjChkId).checked)
        document.getElementById(ObjTxtId).disabled = false;
    else
        document.getElementById(ObjTxtId).disabled = true;
}

Create a C# function like this on the grid RowDataBound:

protected void lstGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        TextBox txtAllowed = (TextBox)e.Row.FindControl("txtAllowed");

        CheckBox chkAllowed = (CheckBox)e.Row.FindControl("RowSelector");
        chkAllowed.Attributes.Add("onClick", "EnableTextbox('" + chkAllowed.ClientID + "', '" + txtAllowed.ClientID + "')");
    }
}

Comments

1

I have the simplest solution yet for this Simple task. Believe me or not it works

s = 1;
   function check(){
       o = document.getElementById('opt');
       if(o.value=='Y'){
           s++;
           if(s%2==0)
           $('#txt').prop('disabled',true);
           else
           $('#txt').prop('disabled',false);
       }
       
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Text: <input type="text" name="txt" id="txt">
<input type="checkbox" name="opt" id="opt" value="Y" onclick="check()">

Here is code.

Comments

0
<script type="text/javascript">
    function EnableDisableTextBox(chkPassport) {
        var txtPassportNumber = document.getElementById("txtPassportNumber");
       txtPassportNumber.disabled = chkPassport.checked ? false : true;
        if (!txtPassportNumber.disabled) {
            txtPassportNumber.focus();
        }
    }
</script>
<label for="chkPassport">
<input type="checkbox" id="chkPassport" onclick="EnableDisableTextBox(this)" />
Do you have Passport?
</label>
<br />
Passport Number:
<input type="text" id="txtPassportNumber" disabled="disabled" />

Comments

-2

Using jQuery:

$("#checkbox").click(function(){
  $("#textbox")[0].disabled = $(this).is(":checked");
});

1 Comment

I seriously can't believe that this answer survived for three years while not working at all... Either use $("#textbox")[0].disabled on the left side or replace the whole line with $("#textbox").prop('disabled', ...); - oh, and why not use this.checked on the right side?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.