Checkbox in accordion panel-body not working

I have a panel-group accordion div which contains multiple panels. For some reason when I put checkbox under panel-body it does not work.

<div class='row'>
    <div class='col-md-12'>
        <div class='panel-group' id='accordion' style='padding:0;'>       
            <div class='panel panel-default isSortablePanel'>
                <div class='panel-heading'>
                    <h4 class='panel-title'>
                        <a data-toggle='collapse' data-parent='#accordion' href='#collapseDiv'>
                            Header Content
                        </a>    
                        <div class='checkbox'>
                            <label><input id='garbageCheckbox' type='checkbox' value=''> Garbage Checkbox on Header (This one works) </label>
                        </div>
                    </h4>
                </div>
                <div id='collapseDiv' class='panel-collapse collapse'>
                    <div class='panel-body'>
                        <div class='row'>
                            <div class='col-md-12'>                         
                                <div class='checkbox'>
                                    <label><input id='garbageCheckbox' type='checkbox' value=''> Garbage Checkbox (This one does not work) </label>
                                </div>
                            </div>       
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

So the checkbox on accordion header works properly, but checkbox on panel-body does not work. Any idea?