Gray out question based upon prior question 1

[apple17]

I know how to gray out a radio button, check box or input field. But how can I gray out the text of the question that goes with the question? In the example below, I would like the entirety of question 2 to be grayed out unless the user selects 'yes' in question 1.

So I have the following:

1. Is the patient sick?
o Yes o No

2. Has a prescription medication been prescribed?
o Yes o No

 

[theniteowl]

Just place the text of the question inside a span or div tag and give that tag an ID. Then in the function you use to set the readOnly property for the radio buttons you also set the style.backgroundColor property for the text field.
Example:

<span id="prescription">2. Has a prescription medication been prescribed?</span>

document.getElementById('prescription').style.backgroundColor = "gray";

Stamp out, eliminate and abolish redundancy!

 

[apple17]

Thank you. That works well, except for one issue. That is that I have a table in Question 2 and all the cells are not affected by the SPAN setting. Do I need to do each cell separately?

 

[theniteowl]

Yes, one span per cell.
You could alter the background color property of the entire table but I thought you wanted to just do the specific text.
If you have the text in one cell and the radio buttons in another you would need to have two span tags and toggle both of them.

You could just as easily toggle the background color of the table cell without having to put in the span tag though.
The only reason for a span or div in this instance was to give you an object it would be easy to alter the properties on. Since you have a table the TD can just as easily be accessed to change, just give the TD an id tag that you can reference just like the span tag was.


Stamp out, eliminate and abolish redundancy!

 

[apple17]

I don't imagine I can give all the TD's the same id? (The question has multiple items for the 'yes'/'no', e.g.

Aspirin o Yes o No
Tylenol o Yes o No
Iboprofen o Yes o No


And actually, I'm trying to gray the text to show that it's not an active question. (I don't care for pages where the text jumps down each time you answer a question that leads to an optional question.)

 

[theniteowl]

You CAN give them all the same ID. It is generally bad form and may give you problems if you ever go to XHTML.
But if you give them all the same name what happens is when you reference the ID you get back an array then you loop through that array to set all of the affected tags.

Or in your function you could just call all of the individual tags like this:

function changeColor() {
document.getElementById('Aspirin').style.backgroundColor = "gray";
document.getElementById('Tylenol').style.backgroundColor = "gray";
document.getElementById('Ibuprofen').style.backgroundColor = "gray";
}

This is the easiest way if you do not have to change a LOT of fields. Otherwise looping through an array of fields of the same tag name is easier.


Stamp out, eliminate and abolish redundancy!