PDA

Click to See Complete Forum and Search --> : how do you make a checkbox enable and disable a text box

•geezey•
04-18-2004, 01:35 AM
can someone please help me I need to know how do you make a checkbox enable and disable a text box.

It would really help with what I'm doing.

I need it for http://gunbound2210.cjb.net .

please help me out :)
Tage
04-18-2004, 02:45 AM
Try something like this
<html>
<head>
<script type="text/javascript">
<!--
function toggleTB(what){
if(what.checked){document.theForm.theTB.disabled=1}
else{document.theForm.theTB.disabled=0}}
//-->
</script>
</head>
<body>
<form name="theForm">
<input type="checkbox" name="theCB" onClick="toggleTB(this)">Toggle The Text Box<br>
<input type="text" name="theTB" value="asdf">
</form>
</body>
</html>

I tested it in MSIE 5.5, MSIE 6.0, Mozilla 1.7b, Opera 7.23, Netscape 7.1, Mozilla Firebird 0.7, Mozilla Firefox 0.8 and they all work fine, I'm using Windows XP Pro btw. Hope this is what you're looking for, later.
neil9999
04-18-2004, 04:49 AM
Or you could do this:

<input type="checkbox" onclick="document.getElementById('thebox').disabled=(this.checked)?1:0">
<input type="textbox" id="thebox">

If you want it so when the checkbox isn't checked the textbox is disabled, just swap the 1 and the 0, and change <input type="textbox" id="thebox"> to <input type="textbox" id="thebox" disabled>

Neil
•geezey•
04-18-2004, 06:20 AM
thank you both so much. you both helped me out. it works the way I wanted it to... but how can I disable 1 thing with 5 radeio buttons. and there is about 19 other radeio buttons in the same group.
neil9999
04-18-2004, 06:36 AM
I don't understand you - please could you explain a bit more.

Thanks,

Neil
steelersfan88
04-18-2004, 10:07 AM
hey neil, with your code, would it be easier just to use:<input type="checkbox" onclick="document.getElementById('thebox').disabled=this.checked">
<input type="textbox" id="thebox">Since when this.checked is true (1) you have it set to one, and otherwise false. Last reply
We don't understand you - please could you explain a bit more.
neil9999
04-18-2004, 12:56 PM
Originally posted by steelersfan88
hey neil, with your code, would it be easier just to use:...

Hmm, strange, it didn't work before when I tried setting it to true/false. Anyway, this:

<input type="checkbox" onclick="document.getElementById('thebox').disabled=!(this.checked)">
<input type="textbox" id="thebox" disabled>

if you want the textbox disabled when checkbox isn't checked.

Anyway •geezey•, explain a bit more...

Neil
steelersfan88
04-18-2004, 12:58 PM
it strictly depends. It could be a checkbox to disable or enable, but the point is the same, but wither way would work.

now you need 19 radios for this, huh?
Tage
04-18-2004, 06:45 PM
Wow, that's slick, I never would have thought of writing it that way... >.<' Thanks, lol. I think I understand what you mean... Is this what you are talking about? If either of the two labeled "disable" are selected it will disable the text box; however, if the third radio button labeled "enable" is selected it will enable it. They are all in the same "group" named "theRBs".

<html>
<body>
<form name="theForm">
<input type="radio" name="theRBs" onFocus="document.theForm.theTB.disabled=1">Disable<br>
<input type="radio" name="theRBs" onFocus="document.theForm.theTB.disabled=1">Disable<br>
<input type="radio" name="theRBs" onFocus="document.theForm.theTB.disabled=0">Enable<br>
<input type="text" name="theTB" value="asdf">
</form>
</body>
</html>

I used onFocus instead of onClick so it still works if they use the keyboard arrows to select the different radio buttons. (Not sure if it is the best way to go, I really didn't test it on any browser other than IE6.0) And I have a question for you guys, is getElementById(formElementID) better than using the form name+element name? Or is that just a matter of taste? I am curious if I should switch to using getElementById for forms. Thanks...
steelersfan88
04-18-2004, 08:53 PM
well if you are in a form, put it to use :) otherwise, getElementById should be used. however, you can change your script to elements[3] rather than document.formname.elementname since they are located in one form, which turns out to be much shorter:<html>
<body>
<form name="theForm">
<input type="text" name="theTB" value="asdf"> <BR>
<input type="radio" name="theRBs" onclick="elements[0].disabled=1">Disable<br>
<input type="radio" name="theRBs" onclick="elements[0].disabled=1">Disable<br>
<input type="radio" name="theRBs" onclick="elements[0].disabled=0">Enable
</form>
</body>
</html>I used elements[0] so any amounts of radios could be added without having to change the element number in each; also I used onclick, since a user can simply move the mouse thru the options without clicking by accident. If they accidentally click, then it wouldn't matter onfocus or onclick, but give the benefit of the foubt that they will click.
•geezey•
04-19-2004, 03:29 AM
thank you that really helped ;) I wish I could make it up to you all for your help. thank you thank you thank you.
neil9999
04-19-2004, 11:50 AM
Originally posted by Tage
And I have a question for you guys, is getElementById(formElementID) better than using the form name+element name? Or is that just a matter of taste? I am curious if I should switch to using getElementById for forms. Thanks...

I use it all the time - it can reference table cells with an ID tag, DIVs, just about anything. Although if you need to use <form name="formname"> then it probably would be better to use document.formname.elementname.

Neil
Tage
04-19-2004, 01:37 PM
Ahhh, okay! Thanks =D
steelersfan88
04-19-2004, 03:23 PM
document.formname.elementname, more preferred as:document.forms['formname'].elements['elementname']I have been expressed to the fact that the blue is optional :)