2

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

rails bootstrap 单选按钮

.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，因为我相信这些特定行是为我生成的。

4

3 回答 3

6

我花了一段时间才弄清楚如何为我的应用程序做一些非常相似的事情，所以我想我会发布我的答案，因为它比上面的更简单。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>

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

于 2015-09-01T20:31:15.723 回答
0

With rails 4 and according to the API you can now add any html parameters to the end of your button declaration so:

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

Should work. Since you're hiding it anyway you may want to get rid of the css class declarations unless you plan to use them for javascript manipulation.

于 2014-03-11T15:13:42.767 回答
0

我使用 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")

于 2014-03-11T15:11:51.317 回答