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

Question

在一系列复选框(比如说 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_"所以如果我给 set <label for="order_recipes_">然后用户“取消选中”标签，然后只有页面上的第一个输入带有 id="order_recipes_"根据我的 css 说明设置样式。

我能看到 choice-select-button.input 的唯一区别是它的值(value)。因此，我正在考虑给标签一个 for=目标 inputs与 id="order_recipes_和 value="6" .首先，这是否可行，其次，这是执行此类操作的最佳方法还是有更简单的方法？

提前致谢。

Answer 1

根据 rrails 文档:

check_box_tag(name, value = "1", checked = false, options = {}) Link Creates a check box form input tag.

Options

:disabled - If set to true, the user will not be able to use this input.

Any other key creates standard HTML options for the tag.

您可以像这样生成不同的 ID:

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