Envoltura <% = f.check_box%> dentro de <label>

Question

Tengo una lista de casillas de verificación en un formulario. Debido a la forma en que está estructurado el CSS, el elemento de etiqueta tiene un estilo directo. Esto me obliga a anidar la casilla de verificación dentro de la etiqueta.

Esto funciona en HTML sin procesar, si hace clic en el texto de la etiqueta, el estado de la casilla cambia. Sin embargo, no funciona con el auxiliar <%= f.check_box %> de rieles, ya que primero emite una etiqueta de entrada oculta.

En resumen,

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

Ésta es la salida que quiero :

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

... pero esto es lo que Rails es darme:

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

Entonces, el comportamiento de la etiqueta no actúa lly trabajo :(.

¿Hay alguna forma de evitar esto?

Answer 1

Rails genera la entrada oculta antes de la casilla de verificación porque necesita una forma de saber si el formulario se envió con la casilla de verificación sin marcar. El orden es sensible ya que la casilla anula la entrada oculta si se ha marcado. Vea el Rails API para más detalles.

Debe usar <label for="checkbox_id"> en lugar de colocar la casilla de verificación en la etiqueta de su etiqueta.

Answer 2

Esa no es la forma de utilizar la etiqueta label. En su lugar utilizar de esta manera:

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

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

actúa ahora "foo" como una etiqueta para el elemento de casilla, y usted puede hacer clic en "Foo" para activar o desactivar la misma.

Answer 3

Esto funciona para mí:

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

Renders:

<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

Ésta es una solución utilicé que incluye la traducción.

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

En en.yml

en: 
    helpers: 
    label: 
     foo: Foo