javascript - 根据复选框状态更改 jQuery UI 下拉菜单的背景颜色

Question

我正在使用 jQuery UI SelectMenu和 jQuery UI Custom Checkboxes and Radio Buttons为页面上的表单设置样式。在设置表单时，我这样定义下拉菜单:

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

然后像这样在页面中创建下拉列表:

<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>

因为有一些下拉菜单(如上面的下拉菜单)是必需的，所以我将它们设置为浅黄色背景和深黄色文本，以便用户知道它们是必需的(可选下拉菜单具有浅灰色背景和灰色文本) .为此，我声明了一种不同于我的 SelectMenu CSS 中默认设置的浅灰色的背景颜色，并且还对文本应用了一个单独的类，如下所示:

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

并且，写入选项本身(如上所示):

class="selectmenu-req-format"

希望一切顺利。现在回答我的问题:

如何根据取消选中页面上的某个复选框，将上述下拉菜单的背景颜色从浅黄色改回浅灰色？

我认为这会起作用:

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

确定复选框 (#basic_cov_life) 是否被选中的代码正在运行......只是将颜色改回灰色的代码不起作用:

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

关于如何将背景颜色改回浅灰色有什么想法吗？而且，虽然我还没有使用上面的代码，但我需要将文本也变回灰色。

非常感谢您的任何见解!

伯克利

Answer 1

在 click 处理程序中，this 将指向您单击的复选框，因此您不必使用 $('#basic_cov_life')。设置任何 css 样式 css 方法需要 2 个参数(属性/值)或一个映射。试试这个。

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