Emballage <%= f.check_box %> dans un <label>

J'ai une liste de cases à cocher sur un formulaire. En raison de la façon dont le CSS est structuré, l'étiquette de l'élément est de style directement. Cela implique que je nest la case à cocher à l'intérieur de la balise.

Cela fonctionne en HTML brut, si vous cliquez sur le texte de l'étiquette, l'état de la case à cocher changements. Il ne fonctionne pas avec les rails <%= f.check_box %> helper, cependant, car il génère un caché balise d'entrée en premier.

En résumé,

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

c'est la sortie je voulez:

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

...mais ce est ce que rails est de me donner:

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

Donc l'étiquette comportement ne fonctionne pas :(.

Est-il un moyen de contourner ce problème?

Donc, lors de l'imbrication de <input> éléments à l'intérieur d'un <label> tag, si vous ne spécifiez pas un for="id", l'étiquette objectifs de la première entrée de l'enfant? Et parce que les rails rend le caché d'entrée tout d'abord, vous devez remplacer la sortie des entrées? Suis-je comprendre cela correctement?
C'est exact, cependant nfm a noté que l'ordre est sensible et ne sera pas réellement travailler dans l'autre sens.

OriginalL'auteur Ben Scheirman | 2010-05-18

  1. 7

    Rails génère le caché de l'entrée avant de la case parce qu'il faut un moyen de savoir si le formulaire a été soumis avec la case décochée. L'ordre est sensible que la case à cocher remplace le caché si elle a été vérifiée. Voir la Rails API pour plus de détails.

    Vous devez utiliser <label for="checkbox_id"> plutôt que d'emballer la case à cocher dans votre balise d'étiquette.

    C'est ce que j'ai fait, mais il semble inutile de donner mon propre :id de la case juste pour que je puisse l'utiliser dans l'étiquette. Merci pour l'info sur pourquoi.
    Twitter Bootstrap est à l'aide de cette imbriquée de la syntaxe.

    OriginalL'auteur nfm

  2. 37

    Cela fonctionne pour moi:

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

    Rend:

    <label for="foo">
  <input name="foo" type="hidden" value="0">
  <input checked="checked" id="foo" name="foo" type="checkbox" value="1">
  Foo
</label>
    Semble de cette façon, il n'y pas d'offre pour l'utilisation automatique de la translittération telle que décrite ici api.rubyonrails.org/classes/ActionView/Helpers/.... Suis-je le droit? Désolé pour le mauvais anglais.

    OriginalL'auteur Tim Scott

  3. 0

    C'est une solution que j'ai utilisée que comprend la traduction.

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

    Dans fr.yml

    en:
  helpers:
    label:
      foo: Foo

    OriginalL'auteur streetlogics

  4. -3

    Ce n'est pas la façon d'utiliser le label tag. Au lieu de l'utiliser comme ceci:

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

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

    Maintenant "Foo" agit comme un label pour la case de l'élément, et vous pouvez cliquer sur "Foo" pour cocher ou décocher.

    C'est une manière parfaitement acceptable d'utiliser le label tag. Voir ici: w3.org/TR/html401/interact/forms.html#h-17.9.1 en particulier ceci: "pour = idref [CS]. Cet attribut explicitement associés à l'étiquette en cours de définition avec un autre contrôle. Lorsqu'il est présent, la valeur de cet attribut doit être la même que la valeur de l'attribut id d'un autre contrôle dans le même document. En cas d'absence, l'étiquette étant défini est associé à l'élément de contenu." MODIFIER: je vais sortir de mon code HTML de haute-cheval & vous donner que c'est un endroit où les Rails sont incompatibles avec l'utilisation correcte de label

    OriginalL'auteur Alec