By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,712 Members | 2,063 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,712 IT Pros & Developers. It's quick & easy.

Listbox changes textbox to disabled and grey

P: n/a
How can I get a listbox to change a textbox on some selections.
I have a listbox which only needs to be filled in on some selections.

Is there a way I can have on some selections the textbox go
disabled and turn grey?

Aug 29 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Br**************@gmail.com wrote:
How can I get a listbox to change a textbox on some selections.
I have a listbox which only needs to be filled in on some selections.

Is there a way I can have on some selections the textbox go
disabled and turn grey?
You can disable it, but what it looks like when disabled is up to the
browser. You may be able to affect the appearance using CSS, but that
is inconsistent across browsers.

Here's a quick example:

<script type="text/javascript">
function modTextbox()
{
document.formA.textA.disabled = !!(document.formA.selA.value%2);
}
window.onload = modTextbox;
</script>
<form name="formA" action="">
<div>
<select id="selA" onchange="modTextbox();">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select>
<br>
<label for="textA"><input type="text" id="textA">Enable
only if selection is an even number</label>
</div>
</form>
--
Rob

Aug 29 '06 #2

P: n/a
Thanks Rob
I still dont get it!!!
do you have an example where the first option is normal
but second option disables textbox?

RobG wrote:
Br**************@gmail.com wrote:
How can I get a listbox to change a textbox on some selections.
I have a listbox which only needs to be filled in on some selections.

Is there a way I can have on some selections the textbox go
disabled and turn grey?

You can disable it, but what it looks like when disabled is up to the
browser. You may be able to affect the appearance using CSS, but that
is inconsistent across browsers.

Here's a quick example:

<script type="text/javascript">
function modTextbox()
{
document.formA.textA.disabled = !!(document.formA.selA.value%2);
}
window.onload = modTextbox;
</script>
<form name="formA" action="">
<div>
<select id="selA" onchange="modTextbox();">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select>
<br>
<label for="textA"><input type="text" id="textA">Enable
only if selection is an even number</label>
</div>
</form>
--
Rob
Aug 29 '06 #3

P: n/a
Br**************@gmail.com wrote:
Thanks Rob
I still dont get it!!!
do you have an example where the first option is normal
but second option disables textbox?
To disable an element that has a disabled attribute (button, input,
optgroup, option, select, textarea) set its value to true. To enable
it again, set disabled to false. The basic algorithm is:

if (condition) {
elementReference.disabled = true;
} else {
elementReference.disabled = false;
}

A shorthand method is to set the value of the disabled attribute to the
outcome of the condition statement:

elementReference.disabled = (condition);

That's effectively the same as the above 5 lines of code. The use of
"!!" in my earlier post was just to make sure that (condition) returned
true or false, it is probably not needed. Here's another example:

<form action="">
<div>
<select onchange="
if ( 1 == this.selectedIndex ) {
this.form.textA.disabled = true;
} else {
this.form.textA.disabled = false;
}
">
<option>Enable input
<option>Disable input
</select>
<input type="text" id="textA">
</div>
</form>

It's possible to get the two out of sync by reloading the page
(depending on the browser) as the input will probably become enabled
again but the selected option may not be reset. Hence my use of an
onload function to make sure they were synchronised.
--
Rob

Aug 29 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.