CODEWITHSUNDEEP
jqueryjquery-uiradio-buttoneach
Mark Richman
Mark Richman

Reputation: 29710

Can't set input checked="checked" via jQuery

I have a table whose rows contain radio button groups like so:

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

When the page loads (inside document.ready) I call this function to check the correct radio buttons, based on the above values for input.use-gsm and 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);
        }

      });
    }

For some reason setting .attr('checked',true) or even .attr('checked','checked') has no effect.

Am I using $.each() or .attr() incorrectly?

Upvotes: 5

Views: 5525

Answers (2)

Chandu
Chandu

Reputation: 82903

Issue is because buttonset hides the radio buttons with span element. Moving teh call to buttonset to end would solve your 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: I assume that you would call this function once only during the page load.

Upvotes: 2

simshaun
simshaun

Reputation: 21466

First, and I don't think this will solve your issue, use .attr('checked', 'checked').

Then, I'm not sure if jQuery polls the radio buttons constantly to determine if their labels need to be updated, but I'd guess that it doesn't. Use Firebug (or equivalent tool) and I'll bet you'll see that the checkboxes actually are being checked in the DOM, but the label styles are not being updated to reflect it.

If that's indeed true, you need to manually add the 'ui-state-active' class to the checkbox's label so that the jQuery UI button appears to be selected. (Be sure to remove that same class from all other labels in the set beforehand.)

Upvotes: 1

Related Questions