Comment pré-activer un bouton dans le btn-group de Bootstrap ?

Question

Comment puis-je déployer le groupe de boutons radio et faire en sorte que l'un des boutons soit prédéfini ?

J'ai un groupe de boutons radio avec les valeurs des jours de la semaine. Celui-ci :

<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn" id="test0">Mon</button>
  <button class="btn" id="test1">Tue</button>
  <button class="btn" id="test2">Wed</button>
  <button class="btn" id="test3">Thu</button>
  <button class="btn" id="test4">Fri</button>
  <button class="btn" id="test5">Sat</button>
  <button class="btn" id="test6">Sun</button>
</div>

Ce dont j'ai besoin, c'est de récupérer la valeur du jour actuel (en utilisant var currentDay = new Date().getDay() ) et toggle (activer) le bouton correspondant dans le groupe.

Et j'essaie de l'activer avec le code suivant (juste à des fins de test) :

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

Cela ne fonctionne pas.

Answer 1

Vous pouvez tirer parti des bretelles .btn.active et ajoutez-la simplement au bouton que vous souhaitez activer en premier et vous pouvez utiliser jQuerys toggleClass pour désactiver les boutons. Démo .

---

Je viens de remarquer que twitter a un bouton script que l'on peut appeler pour cet effet, voici un fixe. Démonstration avec les résultats que vous attendiez.

---

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

J'ai ajouté une fonction qui récupère le jour actuel en utilisant des javascripts. getDay à partir d'un tableau et fait basculer le jour correspondant sur le groupe de boutons en ciblant l'id du bouton : Démonstration

Code pertinent :

JS

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');

Answer 2

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

J'ai trouvé un focus fonctionnerait pour Bootstrap 3. Notez que autofocus est un Attribut HTML5 .

<div class="btn-group">
      <button class="btn" id="test0" autofocus="true">Mon</button>
      <button class="btn" id="test1">Tue</button>
      <button class="btn" id="test2">Wed</button>
      <button class="btn" id="test3">Thu</button>
      <button class="btn" id="test4">Fri</button>
      <button class="btn" id="test5">Sat</button>
      <button class="btn" id="test6">Sun</button>
</div>

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

Answer 3

Il suffit d'imiter le bouton sur lequel on clique au chargement de la page :

$("#buttonid").trigger("click") ;

Cela a fonctionné pour un autre bouton standard similaire que je voulais montrer comme ayant été cliqué au chargement de la page - l'action du bouton était nécessaire pour définir la vue de la table par défaut de la page que je voulais afficher. D'autres boutons fournissent des vues différentes, mais le bouton par défaut affiche toutes les données.

Answer 4

J'ai rencontré le même problème mais je voulais une solution plus simple. J'ai remarqué que l'ajout de "active" à la classe ne résout pas le problème, car il est supprimé d'une manière ou d'une autre (je n'ai pas cherché pourquoi).

La solution consiste à ajouter "active active" à la classe. De cette façon, un seul est supprimé et l'autre contourne la magie qui se passe derrière. C'est une solution vraiment sale, mais elle résout le problème. J'espère que cela vous aidera !