Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

How to reference and change a specific label's attribute

syntax, syntax, syntax!



2:51 am on Dec 29, 2005 (gmt 0)

10+ Year Member

I just know this is something so simple! Yet, it eludes me...

I have 2 groups of radio buttons. These allow the user to select sorting (order by) options for a search page. Each group of buttons therefore have the same caption/label text. When the user makes a selection in one set of buttons, I want to disable that selection in the other set of buttons. I am sure it could be done more elegantly, but I have that much working.

So the user sees something like this:

First sort:
* Sort by color
* Sort by size
* Sort by price

Second sort:
* Sort by color
* Sort by size
* Sort by price

If the user clicks 'Sort by price' in the first set of buttons, the 'Sort by price' option in the second set is disabled. However, a disabled radio button is hardly noticeable. I want it to be obvious. So, I want to either disable the label, or change the color of the label of any disabled radio button.

My labels use the "for" keyword to wrap the label to the control.

I have tried assigning the label an ID, and using a JavaScript function to make a style change to the label, but none of the syntax that I have tried for accessing the individual labels is correct. The simple question is: how do I access the style property of individual label elements on a form. The answer may become slightly more complicated because the labels are using "for" to tie them to the radio buttons, and the radio buttons are within a fieldset, within a DIV. (But, simply using the ID of the radio buttons, it was easy to access the individual buttons to enable and disable them, so I don't know why the ID does not seem to work with labels.)

The HTML for the first set of buttons might look something like this (simplified):

<div class="radio_options">
<label for="sort1_color" id="lblsort1_color" class="labelRadio"><input type="radio" name="rb_sort1" id="sort1_color" class="inputRadio" value="sort1_color" checked="checked" onClick="SetSortOptions2()" />Sort by color</label>
<label for="sort1_size" id="lblsort1_size" class="labelRadio"><input type="radio" name="rb_sort1" id="sort1_size" class="inputRadio" value="sort1_size" disabled="disabled" onClick="SetSortOptions2()" /> Sort by size</label>
<label for="sort1_price" id="lblsort1_price" class="labelRadio"><input type="radio" name="rb_sort1" id="sort1_price" class="inputRadio" value="sort1_price" onClick="SetSortOptions2()" />Sort by price</label>

I'd post the function that I'm using to change the radio button's disabled status (which is where I am also trying to make the change to the labels) if necessary for clarification, but this is already getting long.

Any help will be appreciated!



6:29 am on Dec 29, 2005 (gmt 0)

10+ Year Member

"GetElementById" was the key to this, which I had tried unsuccessfully before. Obviously, I missed something on the first go-round.



Featured Threads

Hot Threads This Week

Hot Threads This Month