I try to change the style of the vertical group of radio buttons, and a new theme appears that I add to one of them, but the theme that I remove from the other / the rest does not disappear.
My goal is to change the theme of the selected radio button (in any case related controls) so that it stands out more when selected.
<div data-role="content"> ... <fieldset data-role="controlgroup" id="showChooser"> <legend><h3>Which show are you attending?</h3></legend> <input type="radio" name="activeShow" id="activeShow1" value="1" /> <label for="activeShow1"> <h2>Choice 1</h2> <p>03/25/2012 - 03/27/2012</p> </label> <input type="radio" name="activeShow" id="activeShow2" value="2" /> <label for="activeShow2"> <h2>Choice 2</h2> <p>03/25/2012 - 03/27/2012</p> </label> <input type="radio" name="activeShow" id="activeShow3" value="3" /> <label for="activeShow3"> <h2>Choice 3</h2> <p>03/25/2012 - 03/27/2012</p> </label> ... </fieldset> ... </div>
This leads to the display of the following list:
(source: skitch.com )
So, by clicking one of them, I run this code:
$('#showChooser input:radio').click(function(e) { $("#showChooser label").attr('data-theme','c'); $(this).next().attr('data-theme','e'); $("#settings").page(); });
In the first line, theoretically, you should reset them all to the base state of the 'C' topic, and then in the second line the selected item will be highlighted. I can walk around and see that these HTML changes are made, so obviously what needs to happen next is for jQuery Mobile to re-analyze and update the display.
Note the desperate attempt to refresh the entire page with .page() at the end, even if this does not produce the desired effect.
When you click once, it gives the desired effect:
But subsequent clicks do not cancel the selection of previously selected lines:
I also tried $("#showChooser").listview("refresh") and several other similar things that I cannot remember, but none of them gave the desired effect. So what am I missing / doing wrong?