title: jquery mobile set selected value of a radio button group
body: <p>I have a radio button group like this:</p>
  
  <pre><code>   &lt;div data-role="fieldcontainer"&gt;
              &lt;fieldset data-role="controlgroup" data-type="horizontal" name="optRestriction" id="optRestriction"&gt;
                  &lt;legend&gt;Restriction&lt;/legend&gt;
                  &lt;input type="radio" name="chkRestriction" id="chkRed" value="R" class="custom" /&gt;
                  &lt;label for="chkRed"&gt;Red&lt;/label&gt;
                  &lt;input type="radio" name="chkRestriction" id="chkYello" value="Y" class="custom" /&gt;
                  &lt;label for="chkYello"&gt;Yellow&lt;/label&gt;
                  &lt;input type="radio" name="chkRestriction" id="chkGreen" value="G"  class="custom" /&gt;
                  &lt;label for="chkGreen"&gt;
  </code></pre>
  
  <p>I am trying to set the selected value after retrieving values from the serve API.</p>
  
  <p>I have tried various ways like below:</p>
  
  <pre><code>  $("input[name=chkRestriction][value=" + data.rows[0].restrictionCd + "]").prop('checked', true).trigger('change');
  
                                  $("input[type='radio']:eq(" + data.rows[0].restrictionCd + ")").attr("checked", "checked");
                                  $("input[type='radio']").checkboxradio("refresh");
  
                                  $("input[name=chkRestriction][value=" + data.rows[0].restrictionCd + "]").prop('checked', true).trigger('change');
                                  $('[name="chkRestriction"]').val([ data.rows[0].restrictionCd ]);
  </code></pre>
  
  <p>But none seem to work. A demo <a href="https://jsfiddle.net/2a0ju0ou/" rel="nofollow">fiddle is here</a></p>
  
  <p>Appreciate any suggestions in advance.</p>