Question

I'm using Bootstrap 3 and I want to make two buttons work as Radio Buttons, but I can't figure out how. Here goes my code

<div class="btn-group" >
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            PERSONAL
        </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            COMPANY
        </button>
    </div>
</div>

When I select PERSONAL, the other one is deselected (as it should), but the problem is:

  • None of them are active when the form is started
  • I can deselect both clicking out of the form
Was it helpful?

Solution

<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>

And initialize with js after: Enable buttons via JavaScript:

$('.btn').button()

You can make one of it active adding "active" class to label - "btn btn-primary active" and "checked" to input radio.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top