Bootstrap radio button "checked" flag

Question

In case #1 works, in case #2 it do not works. Check the code bellow:

<div class="container">     <div class="row">         <h1>Radio Group #1</h1>         <label class="radio-inline">           <input name="radioGroup" id="radio1" value="option1" type="radio"> 1         </label>         <label class="radio-inline">           <input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2         </label>         <label class="radio-inline">           <input name="radioGroup" id="radio3" value="option3" type="radio"> 3         </label>     </div>     <div class="row">         <h1>Radio Group #2</h1>         <label for="year" class="control-label input-group">Year</label>         <div class="btn-group" data-toggle="buttons">             <label class="btn btn-default">                 <input name="year" value="2011" type="radio">2011             </label>             <label class="btn btn-default">                 <input name="year" value="2012" type="radio">2012             </label>             <label class="btn btn-default">                 <input name="year" value="2013" checked="checked" type="radio">2013             </label>         </div>       </div>   </div> 

You can see it in action here: http://bootply.com/84165

Answer 1

Assuming you want a default button checked.

<div class="row">     <h1>Radio Group #2</h1>     <label for="year" class="control-label input-group">Year</label>     <div class="btn-group" data-toggle="buttons">         <label class="btn btn-default">             <input type="radio" name="year" value="2011">2011         </label>         <label class="btn btn-default">             <input type="radio" name="year" value="2012">2012         </label>         <label class="btn btn-default active">             <input type="radio" name="year" value="2013" checked="">2013         </label>     </div>   </div> 

Add the active class to the button (label tag) you want defaulted and checked="" to its input tag so it gets submitted in the form by default.

Answer 2

A javascript fix to apply the 'active' class to all labels that are parents of checked inputs:

$(':input:checked').parent('.btn').addClass('active'); 

insert right after

$('.btn').button();