Question

我在表单上有一个复选框列表。由于CSS的结构方式，标签元素直接设置样式。这需要我将复选框嵌套在标签内。

这适用于原始HTML，如果单击标签文本，则复选框的状态会发生变化。但是，它不适用于rails <%= f.check_box %>帮助程序，因为它首先输出隐藏的输入标记。

总之，

<label>
   <%= f.check_box :foo %>
   Foo
</label>

这是我想要的输出：

<label>
    <input type="checkbox" ... /> 
    <input type="hidden" ... />
    Foo
</label>

...但这个就是rails给我的东西：

<label>
    <input type="hidden" ... />
    <input type="checkbox" ... />
    Foo
</label>

因此标签行为实际上不起作用：（。

有没有办法解决这个问题？

Answer 1

这对我有用：

<%= f.label :foo do %>
  <%= f.check_box :foo %>
  Foo
<% end %>

渲染：

<label for="foo">
  <input name="foo" type="hidden" value="0">
  <input checked="checked" id="foo" name="foo" type="checkbox" value="1">
  Foo
</label>

Answer 2

Rails在复选框之前生成隐藏的输入，因为它需要一种方法来知道表单是否在未选中复选框的情况下提交。订单是敏感的，因为复选框会覆盖隐藏的输入（如果已选中）。有关详细信息，请参阅Rails API。

您应该使用<label for="checkbox_id">而不是将复选框包装在标签标记中。

Answer 3

这是我使用的包含翻译的解决方案。

<%= 
  f.label(
    :foo, 
    "#{f.check_box(:foo)} #{t('helpers.label.foo')}".html_safe
  ) 
%>

在en.yml

中

en:
  helpers:
    label:
      foo: Foo

Answer 4

这不是使用label标记的方法。而是像这样使用它：

<input type="hidden" ... /> <!-- doesn't really matter where these are -->

<label for="id_of_element">Foo</label>
<input type="checkbox" id="id_of_element" ... />

现在“Foo”充当checkbox元素的标签，您可以点击“Foo”来检查或取消选中它。

环绕＆lt;％= f.check_box％＆gt;在<label> </label>内

4 个答案: