Checked state for buttons Bootstrap

Question

I want to have a checked state for group chexboxes in Bootstrap 3.0.2. docs

html:

<div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
        <input type="checkbox" name="123" data-toggle="button"> <span class="glyphicon glyphicon-star"></span> 123
      </label>
      <label class="btn btn-default">
        <input type="checkbox" name="456"> <span class="glyphicon glyphicon-star-empty"></span> 456
      </label>
    </div>

But data-toggle="button" doesnt works. jsfiddle

How to fix it? Thanks.

Answer 1

To actually check the input, you will need to add the checked property. This will not actually make it appear checked, but is important if you are using this in a form and actually want the input to be checked by default.

<input type="checkbox" name="123" data-toggle="button" checked>

To make it look checked (or pressed), add class .active to the .btn label wrapping it.

 <label class="btn btn-default active">

http://jsfiddle.net/ZktYG/2/

Not sure why data-toggle="buttons" isn't working. Could be related to this: https://github.com/twbs/bootstrap/issues/8816

For now, you can achieve the same effect through JS by doing something like:

$('.btn-group').on('input', 'change', function(){
   var checkbox = $(this);
   var label = checkbox.parent('label');
   if (checkbox.is(':checked'))  {
      label.addClass('active');
   }
   else {
      label.removeClass('active');
   }
});

Answer 2

It's been a couple of years; however, I wanted to address the actual problem above of why the data-toggle="button" wasn't working.

The answer was to remove the data-toggle="button" on the <input>'s.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="checkbox" name="123"> 123
    </label>
    <label class="btn btn-default">
        <input type="checkbox" name="456"> 456
    </label>
</div>