I have this collapsible
<div data-role="collapsible" data-collapsed="true" id="d27" name="d27" class="ui-block-a">
<h4></h4>
<div class="ui-block-a">
<legend>D27: Yes or no?</legend>
</div>
<div class="ui-block-b">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radioName" id="si27" value="1" />
<label for="si27">Sì</label>
<input type="radio" name="radioName" id="no27" value="0" checked="checked" />
<label for="no27">No</label>
</fieldset>
</div>
</div>
I want to set programmatically, under certain circumstances, the value checked to No. If i put the radio outside the collapsible this works perfectly:
$('#no27').trigger("click");
Inside it's not working. What am i missing?
I guess i haven't understood the way jquery find elements in a html page. If you can, also, point out some illuminating article it would be great ^^
The reason it isn't working is because you have to refresh
the elements you update when using jQuery Mobile or jQuery UI.
This will work:
$("#no27").prop("checked", true);
$("#d27").find("input[type='radio']").checkboxradio("refresh");
Using .prop()
the checked value of #no27
is set to true
. The second line then refreshes the radio buttons inside #d27
using .checkboxradio("refresh")
.
Here it is working: http://jsfiddle.net/ssKaV/, here's an interactive toggling example: http://jsfiddle.net/XxRvs/