Change a jQuery UI Dropdown's background color depending on Checkbox status

Question

I'm using jQuery UI SelectMenu and jQuery UI Custom Checkboxes and Radio Buttons to style a form on a page. In setting up the form, I define my dropdown as such:

$('select#em_basic_life_plans').selectmenu({
    style:'dropdown',
    width: 378,
    maxHeight: 238
});

And create the dropdown within the page like so:

<fieldset>
    <select name="em_basic_life_plans" id="em_basic_life_plans" tabindex="10" />
    <option value="" selected="" class="selectmenu-req-format">Plan: select</option>
    <option value="5K">Plan: 5K Flat Benefit</option>
    <option value="10K">Plan: 10K Flat Benefit</option>
    <option value="100K Maximum">Plan: 100K Maximum</option>
    </select>
</fieldset>

Because there are some dropdowns (like the one above) which are required, I style them with a light yellow background and dark yellow text so that the user knows they are required (optional dropdowns have a light grey background and grey text). I do this by declaring a background color different from the light grey default set in my SelectMenu CSS and by also applying a separate class to the text like so:

#em_basic_life_plans-button {background-color: #fff4bf !important;}

and, written into the option itself (as seen above):

class="selectmenu-req-format"

Hopefully that sets things up. Now for my question:

How do I change the background color of the above dropdown from light yellow back to light grey, depending on when a certain checkbox on the page is unchecked?

I thought that this would work:

$('#basic_cov_life').click(function() {
    if ($('#basic_cov_life').is(':checked')) {
        alert("Debugging: this is now checked.");
    }
    else {
        $('#em_basic_life_plans-button').css('background-color:#B3B3B3;');
    }
});

The code for determining whether or not the checkbox (#basic_cov_life) is checked is working... it's just the code to change the color back to grey that isn't working:

$('#em_basic_life_plans-button').css('background-color:#B3B3B3;');

Any ideas on what to do to change the background color back to light grey? And also, though I haven't gotten to it yet with the above code, I would need the text to change back to grey as well.

Thanks so much in advance for any insight!

Berklie

ShankarSangoli · Accepted Answer · 2011-08-23 16:41:30Z

3

In the click handler this will point to the checkbox you clicked so you don't have to use $('#basic_cov_life'). To set any css style css method takes 2 arguments(property/value) or a map. Try this.

$('#basic_cov_life').click(function() {
    if ($(this).is(':checked')) {
        $('#em_basic_life_plans-button').css('backgroundColor', '#fff4bf');//Set the appropriate color here
    }
    else {
        $('#em_basic_life_plans-button').css('backgroundColor', '#B3B3B3');
    }
});

answered Aug 23, 2011 at 16:41

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Berklie Over a year ago

Thanks for pointing out the use of this... however, neither what I had $('#em_basic_life_plans-button').css('background-color:#B3B3B3;'); nor what you suggested $('#em_basic_life_plans-button').css('backgroundColor', '#B3B3B3'); are changing the background color. Anything else that you can think of? Thanks again.

ShankarSangoli Over a year ago

$('#em_basic_life_plans-button').css('backgroundColor', '#B3B3B3'); definitely works. Can you check $('#em_basic_life_plans-button').length? Are you sure you have the right selector id?

Berklie Over a year ago

Hi there. Yep, dropping alert($('#em_basic_life_plans-button').length); gives me a value of "1" each time that I click the checkbox... so I know that I've got the correct Selector ID. I think it's getting complicated due to the fact that within the SelectMenu CSS I am declaring it as light grey, and then I'm using #em_basic_life_plans-button {background-color: #fff4bf !important;} when the page loads. So, I'm left not being able to work with it as clear cut as $('#em_basic_life_plans-button').css('backgroundColor', '#B3B3B3'); should allow. Might I need to override !important somehow?

ShankarSangoli Over a year ago

Can you remove important from the css. Change it to '#em_basic_life_plans-button {background-color: #fff4bf;}. If that do not work then try to pass !important in the css method along with the color, like this `$('#em_basic_life_plans-button').css('backgroundColor', '#B3B3B3 !important');

Berklie Over a year ago

You know, we had !important declared so that IE6 would behave. However, now that we no longer support IE6, I can actually remove !important. Removing !important (with quick testing in IE8, Firefox, Safari, and Chrome) accomplishes our desired "required" color change to light yellow (and proves it is no longer necessary to us). So, without having !important in the top declaration... your code now works as expected. Apparently, !important really means no override. Thank you much! What other code can I use to change the text color to grey from yellow (class="selectmenu-req-format" )?

|

William Niu · Accepted Answer · 2011-08-24 02:05:46Z

0

document.getElementById("basic_cov_life").checked // returning boolean

or

$("#basic_cov_life").attr("checked") // returning attribute value

or

$("#basic_cov_life").prop("checked") // returning attribute value

edited Aug 24, 2011 at 2:05

William Niu

15.9k8 gold badges58 silver badges93 bronze badges

answered Aug 23, 2011 at 16:43

Jbird

2,9061 gold badge24 silver badges29 bronze badges

1 Comment

Berklie Over a year ago

I appreciate the code, but it's the background color changing bit which needs help. I've got the checkbox's checked/unchecked determination working.

Collectives™ on Stack Overflow

Change a jQuery UI Dropdown's background color depending on Checkbox status

2 Answers 2

11 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related