Bootstrap Radio Button Unselect

Question

I would like to select only one option below which works fine, but also to deselect an option with bootstrap making nothing selected. Is there a way to do this?

<div class="btn-group" data-toggle="buttons-radio">
     <button data-toggle="button" class="btn btn-small">1</button>
     <button data-toggle="button" class="btn btn-small">2</button>
     <button data-toggle="button" class="btn btn-small">3</button>
</div>

Solberg

Answer 1

You'd have to do that with Javascript:

$(".btn-group button").removeClass("active");

See here: http://jsfiddle.net/TrPFf/2/

Yokefellow

The selection on the first time doesn't seem to work for me – Feu

Answer 2

If you are using Bootstrap's Button plugin, you can wrap the radio buttons in "button" labels like this:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

This makes a more semantic HTML and it's easier to get the user input.

Hoofed

how does it answer his question? – Feu

The button plugin handles that automatically. It's also the way they recommend in the bootstrap docs. – Hoofed