代码之家 › 专栏 › 技术社区 › Ben Scheirman

包装<%=f.勾选“%>内”<label>

ruby-on-rails html

Ben Scheirman · 技术社区 · 15 年前

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

这在原始HTML中工作,如果单击标签文本,复选框的状态将更改。它不能和轨道一起工作 <%= f.check_box %> 但是,因为它首先输出一个隐藏的输入标记。

综上所述,

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

这是输出I 希望 :

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

但… 这是Rails给我的:

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

所以标签行为实际上不起作用:(。

有没有办法避开这个?

4 回复 | 直到 11 年前

nfm 15 年前

Rails在复选框之前生成隐藏的输入,因为它需要一种方法来知道表单是否在复选框未选中的情况下提交。命令是敏感,因为复选框会覆盖隐藏输入(如果选中)。见 Rails API 详情。

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

Tim Scott 13 年前

这对我很有用:

<%= 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>

streetlogics 11 年前

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

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

在E.YML中

en:
  helpers:
    label:
      foo: Foo

-3

Alec 15 年前

这不是使用 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”用作复选框元素的标签,您可以单击“foo”来选中或取消选中它。

推荐文章

aarona · Rails迁移批量更新change_column_default

11 月前