Radio buttons in Rails using Bootstrap 3.1.1

Question

I have a form in Rails 4 where I want to use Bootstrap's radio buttons to set a binary value, instead of using a checkbox.

I'm using Bootstrap's example as a reference.

I want it to look like this:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="options" id="option1"> True
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2"> False
  </label>
</div>

http://jsfiddle.net/52VtD/3456/

But this is what I have so far (using HAML):

.btn-group{"data-toggle" => "buttons"}
  %label.btn.btn-default
    = f.radio_button :single_use, true
    True
  %label.btn.btn-default
    = f.radio_button :single_use, false
    False

Which produces:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <label class="radio" for="something_single_use_true">
      <input id="something_single_use_true" name="something[single_use]" type="radio" value="true"> 
    </label>
    Single use
  </label>
  <label class="btn btn-default">
    <label class="radio" for="something_single_use_false">
      <input checked="checked" id="something_single_use_false" name="something[single_use]" type="radio" value="false">
    </label>
    Unlimited use
  </label>
</div>

I'm also using rails-bootstrap-forms.

Update: Playing around in Chrome's DevTools, I can make the buttons look how I want them to (sans radio button) if I add the style display: none; to the lines

<label class="radio" for="something_single_use_true">
...
<label class="radio" for="something_single_use_false">

But I'm not sure how to do that in HAML and using the Form Helper in Rails, because I believe those specific lines are generated for me.

Answer 1

I used jQuery for post-styling such as removing the parent labels and showing the button clicked:

# app/assets/javascripts/something.js.coffee
$ ->
  single_use = $("#something_single_use_true")
  unlimited_use = $("#something_single_use_false")

  # Hide the radio buttons from the buttons.
  single_use.parent().css("display", "none")
  unlimited_use.parent().css("display", "none")

  # Show the button as clicked if the radio button is checked.
  if single_use.is ':checked'
    single_use.parent().parent().addClass("active")
  else if unlimited_use.is ':checked'
    unlimited_use.parent().parent().addClass("active")

Answer 2

It took me a while to figure out how do something very similar for my app, so I thought I would post my answer since it's simpler than the above. Bootstrap has button groups that act like radio buttons in the JavaScript components - so you don't actually have to write any JavaScript. The documentation for that button group is here.

Here is my html.erb (sorry not haml) to accomplish this for a button group that let's a user select various distances:

<%= form_for(@location) do |f| %>
  <div class="field form-group">
    <%= f.label :distance %><br>
    <div class="btn-group" data-toggle="buttons">
      <%= f.label :distance, class: "btn btn-primary active" do %>
        <%= f.radio_button :distance, 0.3, checked: true %>
        0.3 miles
      <% end %>
      <%= f.label :distance, class: "btn btn-primary" do %>
        <%= f.radio_button :distance, 0.5 %>
        0.5 miles
      <% end %>
      <%= f.label :distance, class: "btn btn-primary" do %>
        <%= f.radio_button :distance, 1 %>
        1 mile
      <% end %>
    </div>
  </div>
  <div class="actions">
    <%= f.submit "Find my escape bus!", class: "btn btn-success" %>
  </div>
<% end %>

Your code should be even simpler (just the field form group snippet with an added bonus of showing how to set a default value of true):

  <div class="field form-group">
    <%= f.label :single_use %><br>
    <div class="btn-group" data-toggle="buttons">
      <%= f.label :single_use, class: "btn btn-primary active" do %>
        <%= f.radio_button :single_use, true, checked: true %>
        True
      <% end %>
      <%= f.label :single_use, class: "btn btn-primary" do %>
        <%= f.radio_button :single_use, false %>
        False
      <% end %>
    </div>
  </div>

Sorry, I don't have enough repo points yet to show a screenshot.

Answer 3

With rails 4 and according to the API you can now add any html parameters to the end of your button declaration so:

= f.radio_button :single_use, true, { class: 'btn btn-primary' }, display: 'none'

Should work. Since you're hiding it anyway you may want to get rid of the css class declarations unless you plan to use them for javascript manipulation.