Come controllare programatically un pulsante gruppo di pulsanti di Bootstrap (radio)

Question

http://jsfiddle.net/rphpbqp9/

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-sm btn-primary success active"> 
     <input type="radio" name="options" id="optionFalse" checked />false 
    </label> 
    <label class="btn btn-sm btn-primary danger"> 
     <input type="radio" name="options" id="optionTrue" />true 
    </label> 
</div> 

$('#optionTrue').button('toggle'); 

Ho letto più risposte di domanda, ma nessuno di loro opere. Il pulsante di commutazione non funziona, ho provato ad aggiungere/rimuovere la classe "attiva", non ha alcun effetto. Sto usando 1.10 jQuery e 3.1 Bootstrap. Questo dovrebbe essere semplice, mi sto tirando i capelli!

Answer 1

button() deve essere chiamata sull'elemento con la classe btn ...

$('#optionTrue').closest('.btn').button('toggle'); 

Questo commuta i pulsanti correttamente e aggiornare le proprietà di ciascun ingresso controllato correttamente ...

Fiddle

Answer 2

È assurdo che i documenti di bootstrap (3.2) non lo rendano più ovvio, ma ecco il metodo più semplice che ho trovato per impostare lo stato iniziale dei pulsanti di opzione nel codice.

<div class="btn-group" data-toggle="buttons"> 
    <label id="optionFalse" class="btn btn-primary"> 
     <input type="radio" name="options" /> false 
    </label> 
    <label id="optionTrue" class="btn btn-primary "> 
     <input type="radio" name="options" /> true 
    </label> 
</div> 

if (initTrue) { 
    $('#optionTrue').button('toggle'); 
} 
else { 
    $('#optionFalse').button('toggle'); 
} 

Dopo aver letto decine di messaggi su questo argomento, sembra che questi sono i punti generali di confusione:

• Procedimento 'ginocchiera' non commuta tra stati (off> on -> spento) come ci si potrebbe aspettare, ma piuttosto basta impostare il pulsante di riferimento su "on" e spegne tutti gli altri pulsanti "off".
• L'ID di riferimento deve trovarsi sull'etichetta e non sull'input.

Answer 3

http://jsfiddle.net/y5qccerz/

document.querySelector(".btn-group input[id='optionTrue']").checked = true;