Botón de radio de la interfaz de usuario de jQuery: cómo cambiar correctamente el estado de verificación

Question

Tengo un conjunto de botones de opción, todos con estilo con la interfaz de usuario de jQuery .button().

Quiero cambiar su estado verificado. Sin embargo, cuando lo hago programáticamente el evento de cambio del contenedor con:

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

Los valores se cambian correctamente, pero el estilo de interfaz de usuario sigue mostrando el botón de opción sin marcar con el estilo marcado, y el comprobado todavía se ve sin marcar.

Revisé la documentación de la jQuery UI en el método button() para botones de opción, pero no hay nada sobre cómo cambiar el estado y actualizar el estilo de la interfaz de usuario.

La cuestión básica del problema es que llamar al código $("selector").button("disable"); no cambia el estado activo del botón: el botón de opción subyacente está correctamente marcado, pero el estado de la UI activa no cambia. Entonces, aparece un botón en gris que parece que todavía está marcado, y el botón real seleccionado aparece sin marcar.

Solución

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

Answer 1

es necesario llamar al método refresh después de cambiar el estado subyacente:

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

Ejemplo de trabajo: http://jsbin.com/udowo3

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

que utiliza identificaciones de los radios, pero no importa siempre que obtenga una instancia de jQuery que contenga el elemento relevante input[type=radio].

Answer 2

Mirando el code, es necesario cambiar la clase ui-state-active, pero la forma más sencilla es probablemente sólo $('someradiobutton').trigger('click') (o si no desea que sus controladores de eventos personalizados para correr, $('someradiobutton').trigger('click.button')).

Answer 3

A pesar de las publicaciones en sentido contrario, PUEDE hacer referencia a un botón de opción por ID. No sé por qué jQuery UI no se actualiza automáticamente cuando los botones de marcado, pero lo hace de esta manera:

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

Ejemplo de trabajo:

<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

restablecerá todos los botones de radio, pero usted puede obtener más específica con el selector

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

Answer 5

Lo resolví restableciendo por completo el Buttonset con setTimeout.

Agregue un evento de clic al botón de radio que necesita confirmación.
Tenga en cuenta el hecho clic 'radioButton' y la completa 'radioSet' en el código de abajo:

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

crear una función muy útil que restablece el Buttonset:

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

Answer 6

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

Eso es todo.

Answer 7

Si alguien todavía está recibiendo este problema, hacer uso de:

.prop('checked',true); 

en lugar de:

.attr("checked", true);