Collapsible content with checkbox in header

I want to realize an collapsible list with a checkbox in each header. Selecting (checking) should only working if you click exactly on the checkbox. Otherwise the header should collapse, and the additional details are visible.

Here an example, how it should looks like:

My try, but without the checkbox implementation:

<div data-role="collapsible-set">
    <div data-role="collapsible" id="col1" data-iconpos="right">

    <h3> Header 1</h3>
    <p>More Informationen about Header 1</p>
    </div>
    <div data-role="collapsible" data-iconpos="right" id="col2">
         <h3>Header 2</h3>

        <p>More Informationen about Header 2</p>
    </div>
    <div data-role="collapsible" data-iconpos="right" id="col3">
         <h3>Header 3</h3>

        <p>More Informationen about Header 3</p>
    </div>
</div>

http://ift.tt/1SrwpeT