Nie można ustawić zaznaczone wejście = „zaznaczone” poprzez jQuery

Question

Mam tabeli, której wiersze zawierają radiowe grup przycisk tak:

<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> 

Po załadowaniu strony (wewnątrz document.ready) wzywam do tej funkcji sprawdzić prawidłowe przyciski radiowe, na podstawie powyższych wartości dla input.use-gsm i 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); 
     } 

     }); 
    } 

z jakiegoś powodu zachodzącego .attr('checked',true) lub nawet .attr('checked','checked') nie ma żadnego wpływu.

Czy używam niepoprawnie $.each() lub .attr()?

Answer 1

Problem polega na tym, że przycisk ukrywa przyciski radiowe z elementem zakresu. Przeniesienie połączenia do zestawu przycisków do końca rozwiąże problem.

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: Zakładam, że funkcję tę można nazwać tylko raz podczas ładowania strony.

Answer 2

Po pierwsze, i nie sądzę, że rozwiąże to problem, użyj .attr('checked', 'checked').

Następnie nie jestem pewien, czy jQuery odpytuje stale przyciski radiowe, aby określić, czy ich etykiety wymagają aktualizacji, ale domyślam się, że tak nie jest. Użyj Firebug (lub odpowiednika tego narzędzia) i założę się, że zaznaczenia pól wyboru są sprawdzane w DOM, ale style etykiet nie są aktualizowane, aby to odzwierciedlić.

Jeśli rzeczywiście tak jest, należy ręcznie dodać klasę "ui-state-active" do etykiety pola wyboru, aby wybrać przycisk jQuery UI. (Pamiętaj, aby usunąć tę samą klasę ze wszystkich innych etykiet w zestawie).