How to check radio box not in view

How to check radio box not in view

Hi. I am having a problem selecting a radio button in a web app. My app is a multi page setup, and the first two pages contain a single list of radio buttons. When the app loads, I want to select one of the radio buttons on each page programatically. I am able to select the radio button on the first page, but selecting radio buttons on subsequent pages cause the app to hang. Here is my code - stripped of unnecessary bits.

  1. <head>
  2. <script>
  3. $( document ).bind( "pageinit", function( event, data ){
  4. $('#'ukLanguage').attr('checked', true).checkboxradio("refresh");
  5. $('#ukLocation').attr('checked', true).checkboxradio("refresh");
  6. });
  7. </script>
  8. </head>
  9. <body>
  10. <div data-role="page" id="setlanguage">
  11. <section data-role="content">
  12. <div data-role="fieldcontain">
  13. <fieldset data-role="controlgroup" data-type="vertical" >
  14. <input name="languageRadio" id="ukLanguage" type="radio" value="en" />
  15. <label for="ukLanguage">English</label>
  16. <input name="languageRadio" id="deLanguage" type="radio" value="de" />
  17. <label for="deLanguage">German</label>
  18. </fieldset>
  19. </div>
  20. </section>
  21. </div>
  22. <div data-role="page" id="setLocation">
  23. <section data-role="content">
  24.    <div data-role="fieldcontain">
  25. <fieldset data-role="controlgroup" data-type="vertical" >
  26. <input name="locationRadio" id="ukLocation" type="radio" value="uk" />
  27. <label for="ukLocation">United Kingdom</label>
  28. <input name="locationRadio" id="deLocation" type="radio" value="de" />
  29. <label for="deLocation">Germany</label>
  30. </fieldset>
  31. </div>
  32. </section>
  33. </div>
  34. </body>

I think the second set of radio buttons is already in the DOM, so am not sure why this would not work. Can anyone shed some light on the subject?