Rails中的单选按钮使用Bootstrap 3.1.1

Question

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

我正在使用Bootstrap的示例作为参考.

我希望它看起来像这样:

<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.该按钮组的文档在此处.

这是我的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>

对不起,我还没有足够的回购点来显示截图.