Изменить цвет фона выпадающего интерфейса JQuery UI в зависимости от статуса флажка - PullRequest
Новая
       27

Изменить цвет фона выпадающего интерфейса JQuery UI в зависимости от статуса флажка

2 голосов
/ 23 августа 2011

Я использую jQuery UI SelectMenu и jQuery UI Пользовательские флажки и радиокнопки для стилизации формы на странице.При настройке формы я определяю свой раскрывающийся список следующим образом: 

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

Есть какие-нибудь идеи о том, что сделать, чтобы изменить цвет фона обратно на светло-серый?А также, хотя я еще не дошел до этого с помощью приведенного выше кода, мне бы также понадобилось изменить текст на серый.

Заранее большое спасибо за понимание!

Berklie

Ответы [ 2 ]

3 голосов
/ 23 августа 2011

В обработчике 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');
    }
});
0 голосов
/ 23 августа 2011 
document.getElementById("basic_cov_life").checked // returning boolean

или 

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

или 

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