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

加法评论：我不能在标签中使用'for'，因为我无法调用嵌套字段id的{{1}}。谢谢！

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

检查加载情况以及每次复选框更改时：

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

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

2 个答案: