Как создать ярлык в зависимости от значения флажка?

Question

Я пытаюсь сделать кнопку включения/выключения для формы. Стиль кнопки зависит от значения флажка (отмечено/не проверено), и сам флажок скрыт. Я знаю, что вы можете использовать css для управления стилем (например, цвет кнопки метки). Есть ли способ изменить стиль своих родителей?

HAML (RoR):

%label.primary_btn 
    set as primary 
    = f.check_box :is_on, style: 'display:none;' 

HTML:

<label class="primary_btn"> 
    On/Off Button 
     <input name="post[images_attributes][0][is_on]" type="hidden" value="0"><input id="post_images_attributes_0_is_on" style="display:none;" type="checkbox" value="1"> 
</label> 

CSS:

.primary_btn { 
    float: left; 
    clear: both; 
    padding: 6px 10px; 
    border-top-left-radius: 9px; 
    border-top-right-radius: 9px; 
    border-bottom-right-radius: 9px; 
    border-bottom-left-radius: 9px; 
    color: white; 
    box-shadow: black 0px 1px 4px -1px; 
    cursor: pointer; 
    background-color: #6d6d6d; 
} 

Добавление комментария: Я не могу использовать 'для' в ярлыке, потому что я не может вызывать id вложенного поля :is_on. Благодаря!

Answer 1

Если вы измените ваш HTML немного, так что метка представляет собой родственный вход (и сразу после него), то есть:

<input type="checkbox" id="c1" /> 
<label for="c1">Some label</label> 

легко достичь с помощью только CSS, например:

input[type=checkbox]:not(:checked) + label {color: gray} 
input[type=checkbox]:checked + label {color: blue} 

Answer 2

Проверка при загрузке и каждый раз, когда изменения CheckBox:

var labelStyle = function(elem) { 
    var lb = elem.closest('label'); 
    if (elem.is(':checked')) { 
     lb.removeClass('label-unchecked').addClass('label-checked'); 
    } else { 
     lb.removeClass('label-checked').addClass('label-unchecked'); 
    } 
} 

$(window).load(function() { 
    labelStyle($('#post_images_attributes_0_is_on')); 
}); 

$('#post_images_attributes_0_is_on').on('change', function() { 
    labelStyle($(this)); 
});