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

Question

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

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

В итоге,

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

это вывод I хочу :

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

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

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