view raw
tim tim - 11 months ago 45
Javascript Question

Checked state for buttons Bootstrap

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


<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 class="btn btn-default">
<input type="checkbox" name="456"> <span class="glyphicon glyphicon-star-empty"></span> 456

doesnt works. jsfiddle

How to fix it? Thanks.


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

Not sure why data-toggle="buttons" isn't working. Could be related to this:

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 (':checked'))  {
   else {