Sie sind auf Seite 1von 2

bootstrap - Open accordion only if Checkbox inside Header is Checked

http://jsfiddle.net/h44PJ/
HTML
****
<div class="panel-group driving-license-settings" id="accordion">
<div class="panel panel-default"
>
<div class="panel-headin
g">
<h4 class="pan
el-title">
<a datatoggle="collapse" data-parent="#accordion" href="#collapseOne">
<input type="checkbox" value=""> I have Driver License
</a>
</h4>
</div>
<div id="collapseOne" cl
ass="panel-collapse collapse in">
<div class="pane
l-body">
<div cla
ss="driving-license-kind">
<div class="checkbox">
<input type="checkbox" value="">A
</div>
<div class="checkbox">
<input type="checkbox" value="">B
</div>
<div class="checkbox">
<input type="checkbox" value="">C
</div>
<div class="checkbox">
<input type="checkbox" value="">D
</div>
<div class="checkbox">
<input type="checkbox" value="">E
</div>
</div>
</div>
</div>
</div>

</div>

JQUERY
******
$('.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;
}
});
});

Das könnte Ihnen auch gefallen