¿Cómo puedo preactivar un botón en el grupo btn de Bootstrap?

Question

¿Cómo puedo desplegar el grupo de botones de radio y hacer que uno de los botones esté preconfigurado?

Tengo un grupo de botones de radio con valores de días de las semanas. Éste:

<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> 

Lo que necesito es a buscar el valor actual días (utilizando var currentDay = new Date().getDay()) y toggle (activar) el botón correspondiente en el grupo.

Y yo estoy tratando de alternar con el código siguiente (justo a los propósitos de prueba):

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

Esto no está funcionando.

Answer 1

usted puede tomar ventaja de la ayuda de nadie .btn.active clase y sólo tiene que añadir al botón que desea toggled primera y se puede utilizar jQuerys toggleClass a untoggle los botones. Demo.

---

di cuenta de que Twitter tiene un guión botón que puede llamar para obtener este efecto, aquí hay una fija demo con los resultados que usted esperaba.

---

Después de mirar lo que realmente quería del comentario, actualicé mi violín con los resultados que estaba buscando.

I añadió una función que tira del día actual usando javascripts getDay método de una matriz y cambia el día correspondiente en el grupo de botones por que apuntan a la ID del botón: demo

código relevante:

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

probé el anterior, pero sólo quería una solución HTML/CSS.

me encontré con un enfoque basado enenfoque funcionaría para Bootstrap 3. Tenga en cuenta que enfoque automático es un atributo 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> 

me parece Bootply es más fácil para los violines con Bootstrap.
Aquí es mi prueba bootply: http://www.bootply.com/cSntVlPZtU

Answer 3

me encontré con el mismo problema, pero querían una solución más simple. Me he dado cuenta de que agregar "activo" a la clase no resuelve el problema, ya que se elimina de alguna manera (no he investigado por qué lo hace).

La solución se agrega "active active" a la clase. De esta forma, solo uno se elimina y el otro pasa por alto la magia que está sucediendo detrás. Es una solución realmente sucia, pero resuelve el problema. ¡Espero eso ayude!

Answer 4

simplemente suplantar el botón bienestar clic al cargar la página:.

$ ("# buttonid") de disparo ("clic");

Funcionó para mí para otro botón estándar similar que quería mostrar como haber hecho clic en la carga de la página: la acción del botón era necesaria para configurar la vista de tabla predeterminada de la página que quería mostrar. Otros botones proporcionan diferentes vistas, pero el predeterminado muestra todos los datos.