У ярлыка переключателя тоже есть выбор?

Question

Согласно (несколько официальному) этому руководству , я могу сделать ярлык переключателя, чтобы сделать выбор для этого переключателя. Они говорят,

Всегда используйте метки для каждого флажка и переключателя. Они связывают текст с определенной опцией и , обеспечивая большую область для нажатия .

К сожалению, я не смог получить эту функциональность для своей формы. Вот мой код:

<% form_for(@bet) do |f| %>
  <%= f.label :bet_type %>
  <%= f.radio_button :bet_type, "moneyline" %>
  <%= f.label :bet_type_moneyline, "Moneyline" %>
  <%= f.radio_button :bet_type, "spread" %>
  <%= f.label :bet_type_spread, "Spread" %>
<% end %>

Я также попробовал это (потому что это пример использования метода FormTagHelper вместо FormHelper):

<% form_for(@bet) do |f| %>
  <%= radio_button_tag :bet_type, "moneyline" %>
  <%= label_tag :bet_type_moneyline, "Moneyline" %>
  <%= radio_button_tag :bet_type, "spread" %>
  <%= label_tag :bet_type_spread, "Spread" %>
<% end %>

Но я все еще не могу заставить его работать. Я использую рельсы 2.3.5 и ruby ​​1.8.7.

Спасибо за чтение и, возможно, за помощь!

Answer 1

Возможно, вы нашли решение, но оно может помочь другим. Я использую Rails 4 +.

Вы можете сделать метку кликабельной правильно, используя Метод подписи FormHelper в Rails , используя клавишу "value" в params.

label(:post, :privacy, "Public Post", value: "public")
# => <label for="post_privacy_public">Public Post</label>

Для вашего кода это должно быть что-то вроде

<%= f.radio_button :bet_type, "moneyline" %>
<%= f.label :bet_type, "Moneyline", value: "moneyline" %>
<%= f.radio_button :bet_type, "spread" %>
<%= f.label :bet_type, "Spread", value: "spread" %>

Надеюсь, это поможет:)

Answer 2

Простой способ сделать это для переключателей - поместить тег ввода внутри метки, например:

<label>
  <input />
  This is an input!
</label>

Это верный способ достижения вашей цели.

В Rails помощник label может принять блок, поэтому вы можете сделать:

<%= f.label :moneyline do %>
  <%= f.radio_button :bet_type, "moneyline" %>
  "Moneyline"
<% end %>

Answer 3

<%= f.radio_button :bet_type, "moneyline" %>
<%= f.label :moneyline, "Moneyline", :for => "bet_type_moneyline" %>

Answer 4

Не зная рельсов, требования к HTML просты: вы должны создать свои теги так:

<input id="bet_type_moneyline" name="bet_type" type="radio" value="moneyline">
<label for="bet_type_moneyline">Moneyline</label>

Итак, прежде всего, проверьте ваш HTML, в вашем примере у вас пропущены кавычки в ... name = "bet_type type =" radio "...

Во-вторых, for = "" всегда указывает на идентификатор поля.

Теперь вы получили кликабельную метку для поля bet_type!

Надеюсь, это поможет!

Answer 5

Я использую Rails 5 и вложенные атрибуты, поэтому было невозможно жестко закодировать идентификатор DOM поля ввода (переключатель).Решение состоит в том, чтобы использовать атрибут value: form.label

<%= form.radio_button :question_option_id, ques_opt.id %>&nbsp;<%= form.label :question_option_id, ques_opt.option_text.humanize, value: ques_opt.id %>

Rails автоматически генерирует атрибут for: для метки.Просто проверьте метку и убедитесь, что атрибут for: вашей метки соответствует идентификатору переключателя.

Answer 6

Woops! Извините все. Я нашел ошибку немного неискренним образом.

Я написал код этого поста от руки ... без копирования-вставки. Для ясности я переименовал некоторые значения, которые я использовал, потому что код, который я выполнял, был немного грязным (и, по-видимому, некорректным).

Итак, когда Габи попросила меня получить какой-то вывод для этих кусков кода, я вставил их в свой обзор и вуаля! Ярлыки, которые выбирают соответствующие радио-кнопки! Но почему?!

Ну, вот в чем дело. Глядя на результат, я понял, что мой исходный код не генерировал согласованные значения input.id и label.for в html. Выглядело это примерно так:

<%= f.radio_button :bet_type, "moneyline" %>
<%= f.label :moneyline, "Moneyline" %>

Это сгенерировано:

 <input id="bet_type_moneyline" name="bet_type type="radio" value="moneyline" />
 <label for="moneyline">Moneyline</label>

Посмотрите, чем отличаются input.id и label.for?

И только когда я запустил код в своем вопросе , я понял это правильно.

Кажется, что работает так: метод тега переключателя делает input.id из его (имя_объекта + "_" + значение), а метод тега label делает label.for из его имя_объекта И когда эти два равны, вы получаете метку выбора.

Надеюсь, это открытие может помочь кому-то еще по пути.

Извините, что ваши шестерни тоже шлифуют!