How to trigger click of a radio button inside a collapsible in jquery?

Question

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 ^^

Answer 1

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/