Pre-toggle a button in Bootstrap's btn-group?

Question

I would like to set a selected button in Bootstrap's btn-group:

<div class="btn-toolbar">
 <div class="btn-group">
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
  <button type="button" class="btn btn-default">7</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">8</button>
 </div>
</div>

How can I pre-select option 5? This answer suggests that I can add active class to the button, which does indeed work initially, but then clicking on the other buttons doesn't deactivate that button, as I would expect.

Here is a fiddle: http://bootply.com/90490

Here is another fiddle with the active class applied, showing why it isn't the correct solution: http://bootply.com/90491 - click on any of the other buttons, and button 5 still remains active.

Answer 1

Assuming that you want there to be a single selection per button group and that you have included the bootstrap JavaScript file, then the following should work.

Markup

<div class="btn-toolbar">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="options" id="option5">5</label>
        <label class="btn btn-default"><input type="radio" name="options" id="option6">6</label>
        <label class="btn btn-default"><input type="radio" name="options" id="option7">7</label>
    </div>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="options" id="option8">8</label>
    </div>
</div>

JavaScript

$(document).ready(function() {
    $(".btn").first().button("toggle");
});

If you want to, for example, pre-toggle the third button, you can use the slice function like so:

$(".btn").slice(2,3).button("toggle");

Alternatively you could assign identifiers to the buttons.

Here's my fiddle: http://bootply.com/90501

Answer 2

I was looking for an answer to the pre-toggle a button and found this SO. They all seemed a bit difficult and I found a link to BootStrap 4 checkbox buttons which gave me some hints on how BootStrap 3 works. My solution is, I think, simpler as it can be pre-written in the html. The solution is below:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="radio" checked>5
    </label>
    <label class="btn btn-default">
        <input type="radio">6
    </label>
    <label class="btn btn-default">
        <input type="radio">7
    </label>
</div>

As I say, this was prompted by BootStrap 4 docs but works on BootStrap 3. The important parts are:

1. The data-toggle="buttons" in the btn-group div.
2. The active class on the label 5.
3. The checked on the <input type="radio"> for 5.

I hope this helps others.