【发布时间】:2011-11-02 03:02:45
【问题描述】:
我正在使用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;');
关于如何将背景颜色改回浅灰色的任何想法?而且,虽然我还没有使用上面的代码,但我还需要将文本改回灰色。
非常感谢您提供任何见解!
伯克利
【问题讨论】:
标签: javascript jquery jquery-ui jquery-selectors selector