复选框样式 - 针对特定的输入元素答案

【问题标题】：Checkbox styling - targeting a specific input element复选框样式 - 针对特定的输入元素
【发布时间】：2016-05-07 10:21:15
【问题描述】：

在一系列复选框（比如说 3 个选项）中，我希望在选中/取消选中关联标签时针对特定输入元素。

HAML

.choice-select-button
  = check_box_tag("order[recipes][]", recipe.id, selected)
  = label_tag do
    = t(".step_4.tick_box_to_select")

呈现 HTML

<div class="choice-select-button">
  <input type="checkbox" name="order[recipes][]" id="order_recipes_" value="6" checked="checked">
  <label>Click to select</label>
</div>

每个<input> 都分配了相同的ID，即id="order_recipes_"，所以如果我设置<label for="order_recipes_"> 并且用户然后“取消检查”标签，那么只有页面上带有id="order_recipes_" 的第一个输入被设置样式根据我的 css 说明。

我可以看到choice-select-button.input 的唯一区别是它的价值。因此，我正在考虑使用id="order_recipes_ 和value="6" 为标签指定inputs 的for=。首先，这是可行的，其次，是做这种事情的最好方法还是有更简单的方法？

提前致谢。

【问题讨论】：

标签： css ruby-on-rails haml

【解决方案1】：

根据 rrails 文档：

check_box_tag(name, value = "1", checked = false, options = {}) 链接创建一个复选框表单输入标记。

选项

:disabled - 如果设置为 true，用户将无法使用它输入。

任何其他键都会为标签创建标准 HTML 选项。

您可以像这样生成不同的 id：

check_box_tag("order[recipes][]", recipe.id, selected, {id: recipe.id})

【讨论】：