I could not find a working answer to the question How to dynamically populate a control group in jQuery Mobile and programatically change its selected value in the search engines, so I though I would write this quick article.
Now, lets say your HTML looks like this:
<fieldset data-role="controlgroup" data-type="horizontal" id="myContrGrp">
<input name="favFruit" id="favFruit-f1" value="apples" type="radio" />
<label for="favFruit-f1">Apples</label>
<input name="favFruit" id="favFruit-f2" value="bananas" type="radio" />
<label for="favFruit-f2">Bananas</label>
<input name="favFruit" id="favFruit-f3" value="strawberries" type="radio" />
<label for="favFruit-f3">Strawberries</label>
</fieldset>
The first thing I am gonna do with this is I am going to bring in a relation between the VALUE and the ID of the inputs. So something like this is better:
<fieldset data-role="controlgroup" data-type="horizontal" id="myContrGrp">
<input name="favFruit" id="favFruit-apples" value="apples" type="radio" />
<label for="favFruit-apples">Apples</label>
<input name="favFruit" id="favFruit-bananas" value="bananas" type="radio" />
<label for="favFruit-bananas">Bananas</label>
<input name="favFruit" id="favFruit-strawberries" value="strawberries" type="radio" />
<label for="favFruit-strawberries">Strawberries</label>
</fieldset>
Now that there is a link between the ID and the VALUE attributes, we can do something like this:
//the value we want to set the control Group to
var favFrt = 'strawberries';
var favFrtSelector = '#favFruit-' + favFrt;
//add the checked="checked" attribute to the appropriate INPUT
$(favFrtSelector).attr('checked', 'checked');
//refresh the control group
$("#myContrGrp").enhanceWithin().controlgroup("refresh");
The above concludes how to change the selected option of control group that already exists and has all its HTML pre-set.
If you need to dynamically populate a jQuery mobile group before you change it, follow these steps.
Create an empty fieldset:
<fieldset data-role="controlgroup" data-type="horizontal" id="myContrGrp"></fieldset>
And use something like the following:
//create an array with all your options:
var cgOpts = ['apples', 'bananas', 'strawberries'];
//create your innerHTML container var:
var innerHTML = '';
//iterate through your array:
for (var i=0;i<cgOpts.length;i++)
{
//current fruit is cgOpts[i]
innerHTML += '<input name="favFruit" id="favFruit-'+ cgOpts[i] + '" value="'+ cgOpts[i] + '" type="radio" /><label for="favFruit-'+ cgOpts[i] +'">'+ cgOpts[i] + '</label>';
}
//now that you have your innerHTML - append it to the jQuery Mobile control group like this:
$("#myContrGrp").controlgroup("container").append(innerHTML);
//and refresh the jQuery Mobile control group like this:
$("#myContrGrp").enhanceWithin().controlgroup("refresh");
Also, I couldn’t find out how to disable a jQuery mobile control group programatically. The native plugin has a “disable” method as well as a disable option but unfortunately they both don’t work.
What I found did work was adding the disabled=”disabled” attribute to the inputs:
$("#myContrGrp input").attr('disabled', 'disabled');
Remember to refresh after this.
So there you have it. Feel free to copy/paste whatever you like.
Note this was done with jQuery Mobile version 1.4. It might change in future versions.