Enable and disable of text box through a 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.

Demo of Enable Disable text box

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>

Number of User Comments : 11


Google+

More on CheckBox & PHP
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.

JALO CREER

05-12-2014

THANK FOR THIS ONE SIR

Post Comment This is for short comments only. Use the forum for more discussions.






OPINION POLL

How you handle Search Engine Optimization ( SEO ) for your website
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2015 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer