Javascript rails单选按钮引导风格

我有一个单选按钮，看起来像这样：

代码：

我想为它添加一些样式，使其如下所示：

怎么做？

加载boostrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script>

定义单选按钮选项

<% collection = [ { name: "Active", id: 1 }, 
                  { name: "Frozen", id: 2 }, 
                  { name: "Finished", id: 3 }
                ] %>

将所有选项显示为切换按钮

<div class="btn-group" data-toggle="buttons">
  <% collection.each do |status| %>
    <label class="btn btn-primary">
      <input type="radio" name="options" id="<%= status[:id] %>" autocomplete="off">
        <%= status[:name] %>
      </input>
    </label>
  <% end %>
</div>

按下按钮时设置类

<script>
  $('.btn').on('click', function () {
    <!-- deselect all buttons and set normal color -->
    $('.btn').removeClass('active');
    $('.btn').removeClass('btn-danger');

    <!-- set current button as active and change color -->
    $(this).addClass('active');
    $(this).addClass('btn-danger');
  });
</script>

$（'.btn'）。在（'click'，函数（）{
$（'.btn'）.removeClass（'active'）；
$（'.btn'）.removeClass（'btn-danger'）；
$（this.addClass（'active'）；
$（this.addClass（'btn-danger'）；
});

我找到的最简单的解决方案： 形式：

在样式表中：

input[type="radio"] {
  display:none;
}

label {
  ///color of borders
  border: 0.5px solid #DDD;
  border-radius:0px;
}

label:hover {
  cursor:pointer;
  background-color:red;
}

input[type="radio"]:checked + label {
  background-color: green;
}

给了我们：

= f.collection_radio_buttons :status, [[1, "Qualification"] ,[2, "Active"] ,[3, "Frozen"] ,[4, "Finished"] ,[5, "Requalified"]], :first, :last

input[type="radio"] {
  display:none;
}

label {
  ///color of borders
  border: 0.5px solid #DDD;
  border-radius:0px;
}

label:hover {
  cursor:pointer;
  background-color:red;
}

input[type="radio"]:checked + label {
  background-color: green;
}