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

Answer 1

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