homepage Welcome to WebmasterWorld Guest from 54.205.144.54
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How to reference and change a specific label's attribute
syntax, syntax, syntax!
dtleahy




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

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">
<fieldset>
<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>
</fieldset>
</div>

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!

Dennis

 

dtleahy




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

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

Dennis

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved