Question

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

  <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并在＆＃34;外部资源＆＃34;下禁用bootstrap.min.js来证明这是问题的一部分。

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

现在，由于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"而更改。删除此属性并尝试一次。它应该工作。

铁路复选框与引导按钮

2 个答案: