Bootstrap button group and form_for - ruby-on-rails

Question

In my Rails app I'd like to use a Bootstrap button group. There is a single field, and each button represents a different state .. ie like radio buttons.
Even better if I can do it with simple_form but can't find a solution by 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

Not sure exactly what you're asking. If your issue is that the active class is not switching to your clicked button, it's because you need javascript to do so.
$('#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
});
See a working example here https://jsfiddle.net/DTcHh/14519/
Edit:
I just learned that this functionality is built in to the bootstrap javascript library. Your markup just needs to be modified to match this syntax
<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>
See example at http://getbootstrap.com/javascript/#buttons-checkbox-radio