Обертка <% = f.check_box%> внутри <label>

У меня есть список флажков в форме. Благодаря тому, что CSS структурирован, элемент ярлыка создается напрямую. Это требует, чтобы я установил флажок внутри тега.

Это работает в необработанном HTML, если вы нажмете на текст ярлыка, изменится состояние флажка. Однако он не работает с помощником rails <%= f.check_box %>, поскольку он сначала выводит скрытый входной тег.

Таким образом,

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

это результат, который я хочу:

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

... но это то, что дает мне рельсы:

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

Таким образом, поведение меток на самом деле не работает: (.

Есть ли способ обойти это?

Ответ 1

Rails генерирует скрытый ввод перед флажком, потому что ему нужен способ узнать, была ли форма отправлена с отмеченным флажком. Порядок чувствителен, поскольку флажок переопределяет скрытый ввод, если он был проверен. Подробнее см. Rails API.

Вы должны использовать <label for="checkbox_id"> вместо того, чтобы обернуть флажок в теге метки.

Ответ 2

Это работает для меня:

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

Ответ 3

Это решение, которое я использовал, включая перевод.

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

В en.yml

en:
  helpers:
    label:
      foo: Foo

Ответ 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" действует как метка для элемента флажка, и вы можете нажать "Foo", чтобы проверить или снять флажок.