Pulsante di scelta dell'interfaccia utente jQuery - come passare correttamente allo stato di controllo

Question

Ho un set di pulsanti di opzione, tutti in stile .button() dell'interfaccia utente di jQuery.

Desidero modificare lo stato selezionato. Tuttavia, quando lo faccio programatically sul evento di modifica del contenitore con:

$("#myradio [value=1]").attr("checked", false); 
$("#myradio [value=2]").attr("checked", true); 

I valori vengono modificati in modo corretto, ma lo stile di interfaccia utente mostra ancora il pulsante di opzione non controllato con lo stile controllato, e quello controllato sembra ancora incontrollato.

Ho esaminato la documentazione dell'interfaccia utente jQuery sul metodo button() per i pulsanti di opzione, ma non c'è nulla su come modificare lo stato e aggiornare lo stile dell'interfaccia utente.

In poche parole, il problema è che la chiamata al codice $("selector").button("disable"); non modifica lo stato attivo del pulsante: il pulsante di opzione sottostante viene controllato correttamente, ma lo stato attivo dell'interfaccia utente non cambia. Quindi, ottengo un pulsante in grigio che sembra sia ancora controllato, e il pulsante reale selezionato appare deselezionato.

Soluzione

$("selector").button("enable").button("refresh"); 

Answer 1

è necessario chiamare il metodo refresh dopo aver cambiato lo stato di fondo:

Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programatically.

esempio di lavoro: http://jsbin.com/udowo3

function setRadio(id) { 
    var radio = $('#' + id); 
    radio[0].checked = true; 
    radio.button("refresh"); 
} 

che utilizza gli ID per le radio, ma non importa finché si ottiene un'istanza jQuery contenente l'elemento input[type=radio] pertinente.

Answer 2

Guardando il code, è necessario attivare la classe ui-state-active, ma il modo più semplice è probabilmente solo $('someradiobutton').trigger('click') (o se non si desidera che i gestori di eventi personalizzati per l'esecuzione, $('someradiobutton').trigger('click.button')).

Answer 3

Nonostante i messaggi contrari, è possibile fare riferimento a un pulsante di opzione tramite ID. Non certo perché JQuery UI non aggiorna i pulsanti automaticamente quando controllato, ma si fa in questo modo:

$('selector').attr('checked','checked').button("refresh"); 

esempio di lavoro:

<div id = "buttons"> 
<label for="b1">button1</label> 
<label for="b2">button2</label> 
<label for="b3">button3</label> 

<input type="radio" name = "groupa" id = "b1" value="b1"> 
<input type="radio" name = "groupa" id = "b2" value="b2"> 
<input type="radio" name = "groupa" id = "b3" value="b3"> 
</div> 

<script> 
    $('#buttons input').button();  
    $('#b3').prop('checked', true).button("refresh"); 
</script> 

Answer 4

resetterà tutti i pulsanti di opzione, ma si può ottenere più specifiche con il selettore.

$('input:radio') 
    .removeAttr('checked') 
    .removeAttr('selected') 
    .button("refresh"); 

Answer 5

Ho risolto ripristinando completamente il pulsante con setTimeout.

Aggiungi un evento clic al pulsante di opzione che richiede conferma.
Si prega di notare il cliccato 'radioButton' e la completa 'radioSet' nel seguente codice:

$('#radioButton').click(function(){ 
    if(confirm('Confirm Text') != true){ 
     resetButtonset('#radioSet', 200); 
     return false; 
    }; 
}); 

Creare una comoda funzione che ripristina la tua Buttonset:

function resetButtonset(name, time){ 
    setTimeout(function(){$(name).buttonset();}, time); 
} 

Answer 6

$('input:radio[name="radioname"] + label[for="eglabel"]').click(); 

Questo è tutto.

Answer 7

Se qualcuno sta ancora ricevendo questo problema, fare uso di:

.prop('checked',true); 

invece di:

.attr("checked", true);