带有 bootstrap 个按钮的轨道复选框

Question

我正在尝试为我的复选框使用 bootstrap 按钮 (http://getbootstrap.com/javascript/#buttons)，用户必须 select 一个或多个选项。每个复选框都是一个布尔列。但是使用此代码，当我单击按钮时，复选框不会 selected，状态也不会改变。

  <div class="btn-group btn-group-justified" data-toggle="buttons">

    <%= f.label :tdm, class: "btn btn-primary" do %>
      <%= f.check_box :tdm%>
      beginner
    <% end %>


    <%= f.label :Domination, class: "btn btn-primary" do %>
      <%= f.check_box :casual%>
      casual
    <% end %>

    <%= f.label :ctf, class: "btn btn-primary" do %>
      <%= f.check_box :ctf%>
      competitive
    <% end %>

    <%= f.label :demolition, class: "btn btn-primary" do %>
      <%= f.check_box :demolition%>
      competitive
    <% end %>
  </div>

我想要完成的事情 https://jsfiddle.net/DTcHh/12565/

Answer 1

您需要做的第一件事是从 here 下载 bootstrap.min.js 并将其放入 vendor/assets/javascripts 文件夹中。然后通过添加此行启用它：

//= require bootstrap.min

到您的 app/assets/javascripts/application.js 文件。您可以通过转到您的 jsfiddle 并在 "External Resources".

下禁用 bootstrap.min.js 来证明这是问题的一部分

但是，您的按钮可能仍然无法使用，因为当您使用 check_box 功能时 Rails 会自动生成一个隐藏的 input，它会破坏 Bootstrap 按钮。您可以在每个 check_box 调用结束时使用 include_hidden: false 参数阻止它创建隐藏的 input。

现在，由于 this post，我认为在您的表单中为您禁用的每个设置一个隐藏的 input 是个好主意。您可以将它们放在不会破坏 Bootstrap 按钮并且会被任何用户输入覆盖的地方。表格中第一个 check_box label 之前的任何地方都应该没问题。它们应该是这样的：

<%= hidden_field(:your_model_name, :tdm, value: "0") %>

应该可以了。

*编辑以包括替换隐藏的输入

Answer 2

我认为你的 DOM 看起来像这样

<div class="btn-group btn-group-justified" data-toggle="buttons">
  <label class="btn btn-primary" for="object_tdm">
    <input name="object[tdm]" type="hidden" value="0">
    <input id="object_tdm" name="object[tdm]" type="checkbox" value="1">
    beginner
  </label>   
</div>

在您的情况下，当您单击按钮时，复选框不会被选中，状态也不会因为 data-toggle="buttons" 而改变。您删除此属性并尝试一次。它应该工作。

带有 bootstrap 个按钮的轨道复选框

Rail checkbox with bootstrap buttons

html

checkbox

ruby-on-rails

radio-button

twitter-bootstrap