Question

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

我希望它看起来像这样：

bootstrap radio buttons

<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）：

rails bootstrap radio buttons

.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>

抱歉，我还没有足够的回购点来显示截图。

Answer 2

我使用jQuery进行后期样式设置，例如删除父标签并显示单击的按钮：

# app/assets/javascripts/something.js.coffee
$ ->
  single_use = $("#something_single_use_true")
  unlimited_use = $("#something_single_use_false")

  # Hide the radio buttons from the buttons.
  single_use.parent().css("display", "none")
  unlimited_use.parent().css("display", "none")

  # Show the button as clicked if the radio button is checked.
  if single_use.is ':checked'
    single_use.parent().parent().addClass("active")
  else if unlimited_use.is ':checked'
    unlimited_use.parent().parent().addClass("active")

Answer 3

使用rails 4并根据API，您现在可以在按钮声明的末尾添加任何html参数，以便：

= f.radio_button :single_use, true, { class: 'btn btn-primary' }, display: 'none'

应该有效。因为你无论如何都要隐藏它，你可能想要除掉css类声明，除非你打算用它们进行javascript操作。

Rails中的单选按钮使用Bootstrap 3.1.1

3 个答案: