Bouton radio Bootstrap drapeau "checked"
dans le cas #1 fonctionne, dans le cas #2 il ne fonctionne pas. Vérifiez le code ci-dessous:
<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>
Vous pouvez le voir en action ici: http://bootply.com/84165
4 réponses
en Supposant que vous voulez un bouton par défaut cochée.
<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>
Ajouter active classe le bouton (label tag) vous voulez défaut et checked="" son input balise ainsi il est soumis dans la forme par défaut.
un correctif javascript pour appliquer la classe 'active' à toutes les étiquettes qui sont des parents d'entrées vérifiées:
$(':input:checked').parent('.btn').addClass('active');
insérer juste après
$('.btn').button();
Utiliser active classe étiquette pour le rendre auto sélectionner et utiliser checked="" .
<label class="btn btn-primary active" value="regular" style="width:47%">
<input type="radio" name="service" checked="" > Regular </label>
<label class="btn btn-primary " value="express" style="width:46%">
<input type="radio" name="service"> Express </label>
Vous devez utiliser active dans l'étiquette pour le faire fonctionner comme mentionné ci-dessus. Mais vous pouvez utiliser checked="checked" et cela fonctionnera aussi. Ce n'est pas nécessaire mais c'est plus lisible et plus logique car c'est plus conforme au format html.