如何根据复选框值设置标签的样式？

我正在尝试为表单打开/关闭按钮。按钮的样式取决于复选框的值（选中/未选中），并且复选框本身被隐藏。我知道你可以使用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; 
}

添加评论：我不能在标签使用 '对'，因为我不能调用嵌套字段:is_on的id。谢谢！

来源

2015-06-23 Quin

看看有什么可以在这里完成http://stackoverflow.com/questions/306635 62/use-images-like-checkboxes/ – jcuenod

感谢@ jcuenod，我无法使用该解决方案的原因是应用程序是在RoR中编写的，我无法获取nested_form库以提供'for'设置标签标签.. – Quin

我很好奇为什么这不适合你：http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-label_tag – jcuenod

如果你改变你的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}

来源

2015-06-23 13:21:01

输入是标签的子元素，所以不可能只用css选择（css不能选择父元素） – kapantzak

你说得对，为什么我建议**改变他的html **。这是一个选项，它会更容易，更加失败。 –

谢谢@TomekSułkowski的答案！如果我不能在标签中使用'for'怎么办？该应用程序在RoR中，我无法设置标签的'for'属性。对不起，我应该说得更清楚。 – Quin

检查负载，每一次的复选框的变化：

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)); 
});

来源

2015-06-23 13:22:51 kapantzak

您不会考虑在页面呈现时设置复选框的可能性（通过后端） –

如何根据复选框值设置标签的样式？

回答

相关问题