<label>

Question

包裝<％= f.check_box％>我有一個窗體上的複選框列表。由於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> 

因此，標籤行爲不會執行lly工作:(。

有什麼辦法可以解決這個問題嗎？

Answer 1

Rails在複選框之前生成隱藏的輸入，因爲它需要一種方法來知道表單是否未被選中複選框提交。 的訂單是，因爲如果複選框被選中，將覆蓋隱藏的輸入。詳細信息請參見Rails API。

您應該使用<label for="checkbox_id">而不是將複選框包裝在標籤標籤中。

Answer 2

這不是使用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" ... />

現在「富」充當複選框元素的標籤，你可以在「富」單擊以選中或取消選中它。

Answer 3

這個工作對我來說：

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

這是我使用包括翻譯的解決方案。

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

在en.yml

en: 
    helpers: 
    label: 
     foo: Foo