【问题标题】:Change a jQuery UI Dropdown's background color depending on Checkbox status根据复选框状态更改 jQuery UI Dropdown 的背景颜色
【发布时间】:2011-11-02 03:02:45
【问题描述】:

我正在使用jQuery UI SelectMenujQuery 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


    【解决方案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');
        }
    });
    

    【讨论】:

    • 感谢您指出this 的使用...但是,我所拥有的$('#em_basic_life_plans-button').css('background-color:#B3B3B3;'); 和您建议的$('#em_basic_life_plans-button').css('backgroundColor', '#B3B3B3'); 都没有改变背景颜色。还有什么你能想到的吗?再次感谢。
    • $('#em_basic_life_plans-button').css('backgroundColor', '#B3B3B3'); 绝对有效。你能查一下$('#em_basic_life_plans-button').length吗?你确定你有正确的选择器ID吗?
    • 您好。是的,每次单击复选框时,删除 alert($('#em_basic_life_plans-button').length); 都会给我一个值“1”...所以我知道我有正确的选择器 ID。我认为它变得越来越复杂,因为在 SelectMenu CSS 中我将其声明为浅灰色,然后在页面加载时使用#em_basic_life_plans-button {background-color: #fff4bf !important;}。所以,我无法像$('#em_basic_life_plans-button').css('backgroundColor', '#B3B3B3'); 允许的那样清晰地使用它。我可能需要以某种方式覆盖!important 吗?
    • 你能从css中删除重要的吗?将其更改为 '#em_basic_life_plans-button {background-color: #fff4bf;}。如果这不起作用,请尝试在 css 方法中传递 !important 以及颜色,例如 `$('#em_basic_life_plans-button').css('backgroundColor', '#B3B3B3 !important');跨度>
    • 你知道,我们已经声明了!important,以便 IE6 能够正常运行。但是,现在我们不再支持 IE6,我实际上可以删除 !important。删除!important(在 IE8、Firefox、Safari 和 Chrome 中进行了快速测试)实现了我们想要的“必需”颜色更改为浅黄色(并证明我们不再需要它)。因此,在顶部声明中没有 !important ......您的代码现在可以按预期工作。显然,!important 真的意味着没有覆盖。非常感谢!我可以使用哪些其他代码将文本颜色从黄色 (class="selectmenu-req-format" ) 更改为灰色?
    【解决方案2】:
    document.getElementById("basic_cov_life").checked // returning boolean
    

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

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

    【讨论】:

    • 我很欣赏代码,但需要帮助的是背景颜色更改位。我已经让复选框的选中/未选中确定起作用了。
    猜你喜欢
    • 2021-10-24
    • 1970-01-01
    • 1970-01-01
    • 2018-10-01
    • 1970-01-01
    • 2021-09-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多