Listbox changes textbox to disabled and grey

B

BrendanMcPherson

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?
 
R

RobG

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>
 
B

BrendanMcPherson

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

RobG

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,479
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top