Enable and disable of text box through a checkbox

Enable Disable Text box through checkbox We may need to enable or disable a text box based on the input of the user by using disabled property of the element. For example we have some choices for the visitor and one of the options is Others. Once the visitor select the others options then ( only ) one text box will be enabled to allow the visitor to fill the details.




We have used the body onload command to keep the text area disabled while the page is loading. The full code is here.
<html>
<head>
<title>(Type a title for your page here)</title>
<script language="JavaScript">
<!--

function enable_text(status)
{
status=!status;	
	document.f1.other_text.disabled = status;
}
//-->
</script>
</head>
<body onload=enable_text(false);>

<form name=f1 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)" >Others
<input type=text name=other_text>
</form>

</body>
</html>


Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    Sumith Harshan

    07-01-2011

    I found everywhere this one.finally i found this by in this site.very simple and useful.good job.thank you.good luck.
    Mike

    30-12-2011

    how to use drop down list instead checkbox in this?
    Chris

    03-06-2012

    This works as described, but what if I want to have multiple disabled text fields linked to multiple checkboxes? The result for me is that checking ONE box enables ALL the text fields, but I would like it to only enable the one. Any ideas? Thanks!
    newbie

    02-08-2012

    this was helpful for me! thank you bro..
    Merline

    05-04-2013

    This Works.. Really superb..
    Sait

    31-05-2014

    can you help me how to disable submit button over the due date??
    smo

    31-05-2014

    You can read how to disable submit button till all the inputs are validated. You can add one more condition to it. But if you take JavaScript client date then that can be changed by user so you have to match with server side date.
    Angelica

    25-07-2014

    thanks it works perfect with textboxes but I also need to be able to enable/disable radio and dropboxes. Please could you tell me how to do this? I tried with your code and it didn't work :(
    Freddy

    18-11-2014

    it should put in body or anywhere can put it ?

    onload=enable_text(false);>

    i tested for secodn if it works i will coment again :D
    taomasaba

    28-11-2014

    You can choose 2 step
    step 1 set onload=enable_text(false);
    step 2 not set onload=enable_text(false);
    and set textbox to diasable

    Ex. <input type=text name=other_text diasabled>

    JALO CREER

    05-12-2014

    THANK FOR THIS ONE SIR
    Php Professional

    13-06-2017

    Great one. This tutorial was really excellent and useful to create a input box with enable and disable method on my new business site.
    Thanks.

    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer