ruby-on-rails - Bootstrap按钮组和form_for

Question

在我的 Rails 应用程序中，我想使用 Bootstrap 按钮组。有一个字段，每个按钮代表不同的状态..即像单选按钮一样。

如果我可以使用 simple_form 做到这一点，但无法通过谷歌搜索找到解决方案，那就更好了。

  <%= simple_form_for @user_word, url: user_words_path, remote: true, wrapper: :inline_form, html: { class: 'form-inline' } do |f| %> 
  <div class="row">
          <div class="col-sm-12">
            <div id="selector" class="btn-group btn-group-sm" >
              <button class="btn level-unknown" id='unknown' type="button">Unknown</button>
              <button class="btn level-low" id='low' type="button">Low</button>
              <button class="btn level-medium active" id='medium' type="button">Medium</button>
              <button class="btn level-high" id='high' type="button">High</button>
              <button class="btn level-known" id='known' type="button">Known</button>
            </div>
          </div>
        </div>
   <% end %>

Answer 1

不知道你到底在问什么。如果您的问题是事件类没有切换到您单击的按钮，那是因为您需要 javascript 来执行此操作。

$('#selector button').on('click',
function(e){
    var $obj=$(e.target);
        $('#selector .active').removeClass('active'); //remove active class from buttons
    $obj.addClass('active'); //add active class to clicked button
});

在此处查看工作示例 https://jsfiddle.net/DTcHh/14519/

编辑:

我刚刚了解到此功能内置于 bootstrap javascript 库中。您的标记只需修改以匹配此语法

 <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

参见 http://getbootstrap.com/javascript/#buttons-checkbox-radio 的示例