可折叠内容，标题中包含复选框

Question

我想实现一个可折叠列表，每个标题中都有一个复选框。只有在完全单击复选框时，才能选择（检查）。否则标题应该折叠，其他详细信息可见。

这是一个例子，它应该如何：

我的尝试，但没有复选框实现：

<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://jsfiddle.net/6t7bhbgc/11/