Twitter Bootstrap 3 collapse when checkbox checked

Here's my solution, works by adding a label wrapper to the checkbox instead of a hyperlink:

<div class="checkbox">
    <label data-toggle="collapse" data-target="#collapseOne">
        <input type="checkbox"/> I have Driver License  
    </label>
</div>

http://jsfiddle.net/L0h3s7uf/1/

UPDATE : There is a Better Answer Below ... Here -> *

JS (Fiddle: http://jsfiddle.net/h44PJ/):

$('.collapse').collapse();

// Don't collapse on checkbox click
$('.panel-heading h4 a input[type=checkbox]').on('click', function(e) {
    e.stopPropagation();
});

// Cancel show event if not checked
$('#collapseOne').on('show.bs.collapse', function(e) {
    if(!$('.panel-heading h4 a input[type=checkbox]').is(':checked'))
    {
        return false;
    }
});

UPDATE (Fiddle: http://jsfiddle.net/h44PJ/567/):

$('.collapse').collapse();

$('.panel-heading h4 a input[type=checkbox]').on('click', function(e) {
    e.stopPropagation();
    $(this).parent().trigger('click');   // <---  HERE
});

$('#collapseOne').on('show.bs.collapse', function(e) {
    if(!$('.panel-heading h4 a input[type=checkbox]').is(':checked'))
    {
        return false;
    }
});

You don't even need to initialize .collapse. Just change your header to:

<h4 class="panel-title">
  <input type="checkbox" value="" data-toggle="collapse" data-target="#collapseOne" /> I have Driver License	
</h4>