No se puede establecer de entrada comprueba = "marcado" a través de jQuery

Question

Tengo una tabla cuyas filas contienen grupos de botones de radio, así:

<td class="usegsm"> 
    <input type="hidden" class="use-gsm" value='<%# DataBinder.Eval(Container.DataItem, "use_gsm") %>' /> 
    <input type="hidden" class="use-gsm-lineup" value='<%# DataBinder.Eval(Container.DataItem, "use_gsm_lineup") %>' /> 
    <input type="radio" id="radio1-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" name="radio-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" class="events-lineups" /> 
    <label for="radio1-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>">Events &amp; Lineups</label> 
    <input type="radio" id="radio2-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" name="radio-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" class="events" /> 
    <label for="radio2-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>">Events</label> 
    <input type="radio" id="radio3-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" name="radio-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>" class="none" checked="checked" /> 
    <label for="radio3-<%# DataBinder.Eval(Container.DataItem, "MatchId") %>">None</label> 
</td> 

Cuando se carga la página (dentro document.ready) Me llaman a esta función comprobar los botones de radio correcto, basado en los valores anteriores para input.use-gsm y input.use-gsm-lineup:

function setGsmButtonStates() { 
     $('td.usegsm').buttonset(); /* http://jqueryui.com/demos/button/#radio */ 
     $('td.usegsm').each(function(i) { 
     var use_gsm = $(this).children('input.use-gsm').val(); 
     var use_gsm_lineup = $(this).children('input.use-gsm-lineup').val(); 

     if (use_gsm == 'Y' && use_gsm_lineup == 'Y') { 
      $(this).children('input.events-lineups').attr('checked', true); 
     } 
     else if (use_gsm == 'Y' && use_gsm_lineup != 'Y') { 
      $(this).children('input.events').attr('checked', true); 
     } 
     else { 
      $(this).children('input.none').attr('checked', true); 
     } 

     }); 
    } 

por alguna configuración de .attr('checked',true) o incluso .attr('checked','checked') no tiene ningún efecto razón.

¿Estoy usando $.each() o .attr() incorrectamente?

Answer 1

El problema se debe a que los botones ocultan los botones de radio con el elemento span. Mover la llamada a los botones para terminar resolvería su problema.

function setGsmButtonStates() { 
     $('td.usegsm').each(function(i) { 
     var use_gsm = $(this).children('input.use-gsm').val(); 
     var use_gsm_lineup = $(this).children('input.use-gsm-lineup').val(); 

     if (use_gsm == 'Y' && use_gsm_lineup == 'Y') { 
      $(this).children('input.events-lineups').attr('checked', true); 
     } 
     else if (use_gsm == 'Y' && use_gsm_lineup != 'Y') { 
      $(this).children('input.events').attr('checked', true); 
     } 
     else { 
      $(this).children('input.none').attr('checked', true); 
     } 

     }); 
      $('td.usegsm').buttonset(); /* http://jqueryui.com/demos/button/#radio */ 
    } 

P.S: Supongo que llamaría a esta función solo una vez durante la carga de la página.

Answer 2

Primero, y no creo que esto resuelva su problema, use .attr('checked', 'checked').

Entonces, no estoy seguro si jQuery sondea los botones de radio constantemente para determinar si sus etiquetas necesitan ser actualizadas, pero supongo que no. Use Firebug (o una herramienta equivalente) y apuesto a que verá que las casillas de verificación están siendo verificadas en el DOM, pero los estilos de etiqueta no se están actualizando para reflejarlo.

Si eso es cierto, debe agregar manualmente la clase 'ui-state-active' a la etiqueta de la casilla de verificación para que el botón jQuery UI parezca estar seleccionado. (Asegúrese de eliminar la misma clase de todas las demás etiquetas en el conjunto anterior.)