Bootstrap - atributo de alternancia de datos cuando existen varios botones

Question

Tengo varios botones. Cuando un usuario hace clic en cualquier botón, quiero darle la impresión de que se hace clic en el botón.

Este es el código:

<table> 
<thead> 
<tr> 
<th><button class="btn btn-danger" >Today</button></th> 
<th><button class="btn btn-danger" >Tomorrow</button></th> 
<th><button class="btn btn-danger" >DayAfterTomorrow</button></th> 
</tr> 
</thead> 
</table> 

Y esto funciona cuando tengo un solo botón:

<button class="btn" data-toggle="button">Today</button> 

Si el usuario hace clic en el mañana, el atributo de palanca de datos sigue siendo para el día de hoy botón. En cambio, quiero desactivar el atributo de alternancia de datos cuando se hace clic en otro botón.

Answer 1

Puede usar la funcionalidad del botón de radio propio esfuerzo para lograr ese efecto. Prueba esto:

<div data-toggle="buttons-radio"> 
    <button class="btn btn-danger">Today</button> 
    <button class="btn btn-danger">Tomorrow</button> 
    <button class="btn btn-danger">DayAfterTomorrow</button> 
</div> 

Demostración: http://jsfiddle.net/u7Lg8/

Answer 2

Debe agrupar los botones debajo de un div y configurar los datos-alternar en el grupo.

Se puede ver en la página de ejemplo para Twitter bootstrap buttons

<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --> 
<div class="btn-group" data-toggle="buttons-checkbox"> 
    <button class="btn">Left</button> 
    <button class="btn">Middle</button> 
    <button class="btn">Right</button> 
</div> 

Answer 3

Trate de esta manera:

$('.btn').click(function(){ 
    //Removing `data-toggle` from all elements 
    $('.btn').removeData('toggle'); 
    //Adding `data-toggle` on clicked element 
    $(this).data('toggle','button');   
}); 

Answer 4

Esto es lo que me ocurrió a mi sitio (única manera de mejorar es no utilizar variable oculta para almacenar valor final)

 $("input[name='dispatch']").change(function(){ 
 
      
 
      $(this).parent().siblings().removeClass('active btn-primary'); 
 
      $("#WantsDispatchService").val($(this).val()); 
 
      
 
     });

 
    <div class="btn-group btn-toggle " data-toggle="buttons"> 
 
\t <label class="btn btn-default btn-sm"> 
 
\t \t <input name="dispatch" value="false" type="checkbox"> No 
 
\t </label> 
 
\t <label class="btn btn-default btn-sm"> 
 

 
\t \t <input name="dispatch" value="true" type="checkbox"> Yes 
 
\t </label> 
 
\t 
 
</div> 
 
<input type ="hidden" id="WantsDispatchService" name="WantsDispatchService" value="false"> 
 
</div>

Answer 5

Puede usar $().button('toggle') para alternar el estado del botón mediante javascript. *

En mi caso; No puedo usar botones agrupados, están visualmente separados el uno del otro.

Compruebo si el otro botón está presionado y lo alterno usando javascript. Aquí está mi solución:

$('#buttonA').click(function (e) { 
    if ($('#buttonB').attr('aria-pressed') == 'true') { 
     $('#buttonB').button('toggle'); 
    } 
    e.preventDefault(); 
}); 

$('#buttonB').click(function (e) { 
    if ($('#buttonA').attr('aria-pressed') == 'true') { 
     $('#buttonA').button('toggle'); 
    } 
    e.preventDefault(); 
});