Twitter bootstrap collapse, radio inside header

Question

How I can put a Radio button inside the collapse header?

See http://jsfiddle.net/dhamaso/LMDMN/3/

<div class="accordion" id="accordion">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <label class="radio">
              <input type="radio" name="address" value="addres_1" id="address_1"/>
                  Shipping Address 1
          </label>
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche 1...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        <label class="radio">
              <input type="radio" name="address" value="addres_2" id="address_2"/>
                  Shipping Address 2
          </label>
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche 2...
      </div>
    </div>
  </div>
</div>

If you see the checkbox, it is not firing the checked event when you click on it. How can I do that?

Answer 1

Well something with the Bootstrap collapse function is interfering with the radio button. Here is one way to do it.

$('#accordion').on('shown', function () {
    $('#accordion .in').parent().find('input[name=address]').prop('checked',true);
});

http://jsfiddle.net/LMDMN/5/

I have the apply the check after the new content is shown or else it wont work.

There may be a way to do it manually if this solution does not work for you.