jquery - ejemplo - como hacer un balance de comprobacion

Botón de selección jQuery UI: cómo cambiar correctamente el estado de comprobación

Question

Tengo un conjunto de botones de .button() , todos diseñados con .button() jQuery UI.

Quiero cambiar su estado verificado. Sin embargo, cuando lo hago programáticamente en 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 la interfaz de usuario todavía muestra el botón de opción sin marcar con el estilo comprobado, y el marcado aún se ve sin marcar.

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

La clave del problema es que llamar al $("selector").button("disable"); el código no cambia el estado activo del botón: el botón de opción subyacente está verificado correctamente, 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

A pesar de las publicaciones en sentido contrario, PUEDE hacer referencia a un botón de opción por ID. No estoy seguro de por qué JQuery UI no actualiza los botones automáticamente cuando está marcada, pero lo hace así:

$(''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 2

Al mirar el code , debe alternar la clase ui-state-active , pero la forma más simple probablemente sea solo $(''someradiobutton'').trigger(''click'') (o si no desea que sus manejadores de eventos personalizados run, $(''someradiobutton'').trigger(''click.button'') ).

Answer 3

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

Actualiza el estado visual del botón. Útil para actualizar el estado del botón después de que el estado seleccionado o desactivado del elemento nativo se cambie programáticamente.

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

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

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

Answer 4

Lo resolví reiniciando por completo el Buttonset con setTimeout.

Agregue un evento de clic al botón de radio que necesita confirmación.
Tenga en cuenta el ''radioButton'' y el ''radioSet'' completo en el código a continuación:

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

Crea una función útil que resetee tu Buttonset:

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

Answer 5

Restablecerá todos los botones de radio, pero puede obtener más específico con el selector.

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

Answer 6

Si alguien sigue teniendo este problema, haga uso de:

.prop(''checked'',true);

en lugar de:

.attr("checked", true);

Answer 7

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

Eso es todo.