Bootstrap: set initial bouton radio coché dans le HTML

Je suis en utilisant Bootstrap, JavaScript boutons de style de la radio, quelques boutons, et je ne semble pas être en mesure de définir un premier bouton à titre de bagages enregistrés.

Voici mon code: 

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-info">
    <input checked="checked" type="radio" id="match-three" name="options">Three numbers
  </label>
  <label class="btn btn-info">
    <input type="radio" name="options" id="match-four">Four numbers
  </label>
</div>

Le premier bouton a checked="checked", mais il n'est pas considéré comme vérifié.

Les boutons sont de style OK après cliquez sur événements, donc je ne suis pas sûr de ce qui ne va pas sur la charge initiale.

Bootply version ici: http://bootply.com/89566

InformationsquelleAutor Richard | 2013-10-23
  1. 16

    Si vous êtes en utilisant le HTML 5 doctype, il suffit d'utiliser checked sans aucune valeur:

    <label class="btn btn-info active">
    <input checked type="radio" id="match-three" name="options">Three numbers
</label>

    checked="checked" devrait fonctionner aussi bien, de sorte que vous aurez à préciser ce qui ne marche pas pour vous.

    • Avoir un checked attribut sur la input assurera un bon état sur le champ de formulaire
    • L'ajout d'un active classe sur le label va définir le bon état visuel

    La documentation de référence.

    • Pourquoi est-ce accepté de répondre, il n'a même pas aborder la question. Ce n'est pas sur les attributs de type boolean. C'est sur Bootstrap boutons radio dans un groupe de boutons (la data-toggle="buttons" peu pertinente trop). La question est assez claire, elle est dotée d'un code d'exemple. Voici un jsFiddle démontrant de nouveau le problème.
    • Votre démo a des erreurs (toutes vos inputs appartiennent au même groupe). Voici une démo mis à jour pour corriger les groupements qui montre que les boutons radio sont en effet vérifié.
    • Merci, je l'ai utilisé différents groupes - mais il ne fait pas de différence quant à cette question. Même si vous avez ajouté un peu de CSS pour montrer qui l'on est cochée, le deuxième bouton radio dans la rangée du haut (Two (checked but without class)) est pas "activé", qui est le problème ici. Ce n'est pas le fait d'avoir coché l'attribut, l'essentiel est que le bouton radio n'est pas de style, comme si il a été vérifié par Bootstrap, sauf si vous ajoutez "active" de la classe.
    • Comme basic6 l'a souligné, ce n'est pas une réponse correcte à la question. Voir getbootstrap.com/javascript/#buttons-checkbox-radio "Pour présélectionnés les options, vous devez ajouter les .classe active à l'entrée de l'étiquette vous-même".
    InformationsquelleAutor André Dion
  2. 10

    Si vous voulez que le Bootstrap button() composant de reconnaître la checked entrées d'abord vous avez besoin pour ajouter un peu de jQuery comme..

    $('[checked="checked"]').parent().addClass("active");

    L'état actif pour les boutons/les étiquettes dans le groupe.

    • La question était de savoir comment définir l'état initial de HTML, pas comment le faire en Javascript. Mais si vous ne voulez pas le faire avec du Javascript, une meilleure solution est d'appeler click() sur le bouton radio champ de saisie.
    • L' ? a propos d'un problème avec un BS composant JavaScript, et ne pas spécifier une pref. de un HTML ou JS solution, et pourquoi est - click() une meilleure solution?? Avez-vous un exemple? Cliquez sur causerait inutile de propagation de l'événement click.
    • Je dirais que c'est une meilleure solution, car il est plus générale de la solution qui fonctionne avec n'importe quel bouton radio et ne cassera pas si Bootstrap modifie la façon dont ils mettent en œuvre leur style des boutons radio (qui est un peu un hack actuellement). En outre, il ne propager l'événement, ainsi que d'autres composants de la page qui change en fonction du bouton radio d'état vont être averti. Mais si l'état initial est connu au moment de l'HTML charges, je m'en tiendrais à bbengfort de solution donc il n'est pas perceptible flip flop de la radio d'état bouton comme le chargement de la page.
    • Dans mon cas, je ne pouvais pas modifier le code html. Donc, c'est facile et bien solution de travail pour moi.
    InformationsquelleAutor Zim
  3. 8

    Comme Skelly mentionné, la classe active est ce que Bootstrap est le basculement, il ne regarde pas l'objet d'attribut. Vous n'avez pas à le faire avec Javascript mais... 

    <label class="btn btn-info active">
    <input checked type="radio" id="match-three" name="options">Three numbers
</label>

    Va vous donner ce que vous cherchez.

    • Vous avez besoin de class="... active" et <input checked ...> pour Bootstrap.
    • Upoted. C'est le droit de réponse - "active" de la classe est ce qu'il manque, sinon Bootstrap ne pas sélectionner le bouton radio.
    InformationsquelleAutor bbengfort