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

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 a开发者_如何学Cre 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

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');
    }
});

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