Comment puis-je basculer un bouton dans le groupe btn de Bootstrap?

Comment puis-je déployer le groupe Radio Button et faire en sorte que l’un des boutons soit pré-configuré?

J’ai un groupe de boutons radio avec les valeurs des jours des semaines. Celui-là:

Ce dont j’ai besoin, c’est d’aller chercher la valeur du jour (en utilisant var currentDay = new Date().getDay() ) et toggle (activer) le bouton correspondant dans le groupe.

Et j’essaie de le basculer avec le code suivant (à des fins de test uniquement):

 $("#test0").button('toggle')

Cela ne fonctionne pas.

Vous pouvez tirer parti de la classe bootstraps .btn.active et l’append au bouton que vous souhaitez sélectionner en premier. Vous pouvez également utiliser jQuerys toggleClass pour supprimer les boutons. Démo .

Juste remarqué que twitter a un script de bouton que vous pouvez appeler pour cet effet, voici une démo fixe avec les résultats que vous attendiez.

Après avoir regardé ce que vous vouliez du commentaire, j’ai mis à jour mon violon avec les résultats que vous recherchez.

J’ai ajouté une fonction qui tire le jour en utilisant la méthode javascripts getDay d’un tableau et active le jour correspondant sur le groupe de boutons en ciblant l’id du bouton: demo

Code pertinent:

 function today() { var arr = ["0", "1", "2", "3", "4", "5", "6"]; //first day of the week is sunday and its index is 0 var currentDay = new Date().getDay(); return (arr[currentDay]); } var day = '[id="test' + today() +'"]'; // we take the current day from the array and add the beginning of the class name and save it in a variable $(day).button('toggle');

J’ai essayé ce qui précède mais je voulais une solution HTML / CSS uniquement.

J’ai trouvé qu’une approche basée sur le focus fonctionnerait pour Bootstrap 3. Notez que l’ autofocus est un atsortingbut HTML5 .

Je trouve que Bootply est plus facile pour les violons avec Bootstrap.
Voici mon test bootply: http://www.bootply.com/cSntVlPZtU

imitez simplement le bouton en cliquant sur le chargement de la page:

$ (“# buttonid”). sortinggger (“click”);

Travaillé pour moi pour un autre bouton standard similaire que je voulais montrer comme ayant été cliqué sur le chargement de la page – l’action du bouton était nécessaire pour définir la vue de la table par défaut que je voulais afficher. D’autres boutons offrent des vues différentes, mais celui par défaut affiche toutes les données.

J’ai rencontré le même problème mais je voulais une solution plus simple. J’ai remarqué que l’ajout de la fonction “active” à la classe ne résout pas le problème, car elle est en quelque sorte supprimée (je n’ai pas cherché à savoir pourquoi).

La solution ajoute “active active” à la classe. De cette façon, un seul est retiré et l’autre contourne la magie qui se produit derrière. C’est une solution vraiment sale, mais cela résout le problème. J’espère que cela aide!