Группа кнопок бутстрапа и form_for

Question

В моем приложении Rails я хотел бы использовать группу кнопок Bootstrap. Существует одно поле, и каждая кнопка представляет собой другое состояние, то есть, как переключатели.

Еще лучше, если я могу сделать это с помощью simple_form, но не могу найти решение Googling.

<%= 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/

Edit:

Я только что узнал, что эта функция встроена в загрузчике библиотеку 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