Question

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

如果我可以使用simple_form做得更好但是无法通过Google搜索找到解决方案。

  <%= 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
上的示例

Bootstrap按钮组和form_for

1 个答案: