ruby-on-rails - 使用 Bootstrap 3.1.1 的 Rails 中的单选按钮

Question

我在 Rails 4 中有一个表单，我想在其中使用 Bootstrap 的单选按钮来设置二进制值，而不是使用复选框。

我使用 Bootstrap's example 作为引用。

我希望它看起来像这样:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="options" id="option1"> True
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2"> False
  </label>
</div>

http://jsfiddle.net/52VtD/3456/

但这就是我目前所拥有的(使用 HAML):

.btn-group{"data-toggle" => "buttons"}
  %label.btn.btn-default
    = f.radio_button :single_use, true
    True
  %label.btn.btn-default
    = f.radio_button :single_use, false
    False

产生:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <label class="radio" for="something_single_use_true">
      <input id="something_single_use_true" name="something[single_use]" type="radio" value="true"> 
    </label>
    Single use
  </label>
  <label class="btn btn-default">
    <label class="radio" for="something_single_use_false">
      <input checked="checked" id="something_single_use_false" name="something[single_use]" type="radio" value="false">
    </label>
    Unlimited use
  </label>
</div>

我也在使用 rails-bootstrap-forms 。

更新:在 Chrome 的 DevTools 中尝试，如果我添加样式 display: none;，我可以让按钮看起来像我想要的那样(没有单选按钮)到线

<label class="radio" for="something_single_use_true">
...
<label class="radio" for="something_single_use_false">

但我不确定如何在 HAML 中执行此操作以及如何在 Rails 中使用 Form Helper，因为我相信那些特定的行是为我生成的。

Answer 1

我花了一段时间才弄清楚如何为我的应用程序做一些非常相似的事情，所以我想我会发布我的答案，因为它比上面的更简单。 Bootstrap 的按钮组在 JavaScript 组件中的作用类似于单选按钮 - 因此您实际上不必编写任何 JavaScript。该按钮组的文档是 here .

这是我的 html.erb(抱歉不是 haml)，用于让用户选择各种距离​​的按钮组完成此操作:

<%= form_for(@location) do |f| %>
  <div class="field form-group">
    <%= f.label :distance %><br>
    <div class="btn-group" data-toggle="buttons">
      <%= f.label :distance, class: "btn btn-primary active" do %>
        <%= f.radio_button :distance, 0.3, checked: true %>
        0.3 miles
      <% end %>
      <%= f.label :distance, class: "btn btn-primary" do %>
        <%= f.radio_button :distance, 0.5 %>
        0.5 miles
      <% end %>
      <%= f.label :distance, class: "btn btn-primary" do %>
        <%= f.radio_button :distance, 1 %>
        1 mile
      <% end %>
    </div>
  </div>
  <div class="actions">
    <%= f.submit "Find my escape bus!", class: "btn btn-success" %>
  </div>
<% end %>

您的代码应该更简单(只是字段表单组代码段以及显示如何设置默认值 true 的额外好处):

  <div class="field form-group">
    <%= f.label :single_use %><br>
    <div class="btn-group" data-toggle="buttons">
      <%= f.label :single_use, class: "btn btn-primary active" do %>
        <%= f.radio_button :single_use, true, checked: true %>
        True
      <% end %>
      <%= f.label :single_use, class: "btn btn-primary" do %>
        <%= f.radio_button :single_use, false %>
        False
      <% end %>
    </div>
  </div>

抱歉，我还没有足够的 repo 积分来显示屏幕截图。