bootstrap checkbox button event propagation issue

I have a custom panel bar with a div for the panel header section. Clicking on this panel should expand/collapse the panel content, which works fine using jQuery toggle.

In the panel header I've placed a bootstrap checkbox with the intention being that checking the box activates that panel, but has no affect on whether or not the panel content expands or collapses.

The Problem:

Clicking the checkbox checks and unchecks the bootstrap checkbox but also expands/collapses the panel content.

What I've been trying:

I've been trying to stop propagation on the checkbox thinking that where ever bootstrap is attaching the event I might be able to stop the click event from happening on the panel header.

//try get rid of event bubbling for checkboxes
$(".btn-group.checkbox").on("change", function (e)
{
    /*I've tried each of these variations*/
    //e.stopPropagation();
    //e.preventDefault();
    //return false;
});

I've also tried the click event instead of change and I've tried this on the .btn element within the btn-group:

//try get rid of event bubbling for checkboxes
$(".btn-group.checkbox .btn").on("change", function (e)
{
    /*I've tried each of these variations*/
    //e.stopPropagation();
    //e.preventDefault();
    //return false;
});

None of these options worked as the checkbox is still causing the panel content to show and hide.

I realised that I was possibly looking at this the wrong way. I'm still not 100% sure why I was unable to use stopPropagation, I suspect it has something to do with Bootstrap already having bound its own event handler, but I'm not totally convinced.

My alternative approach was to wire up the panel bar head section's click event then check the target of the original event to see where it came from. If it was the custom check box I ignored it allowing the bootstrap checkbox to do its thing. If not, I toggled the panel content.

Here's the code:

//handle the panel bar header click event
$(".pnl-01-bar").click(function (e)
{
    //get a jquery reference to the original target of this event
    var $target = $(e.originalEvent.target);

    //if this did NOT come from the checkbox
    if (!$target.hasClass("bs-checkbox"))
    {
        //toggle the panel content
        $("#pnlSlider1").toggle();
    }            
});

Here's the HTML:

<div class="scenario-heading pnl-01-bar">
    <div class="col-md-3">
        <div data-toggle="buttons" class="btn-group checkbox">
        <label class="btn btn-primary  checkbox" for="UseRetirementAge">
        <span class="bs-checkbox"></span>
        <input type="checkbox" style="visibility: hidden" data-val="1" id="UseRetirementAge" name="UseRetirementAge" value="1">
        </label>
        </div>
        <span data-valmsg-replace="true" data-valmsg-for="UseRetirementAge" class="field-validation-valid"></span>
            Change my retirement date
        </div>
</div>
<div class="scenario-panel">
    <div style="display:none" id="pnlSliders1">
        ...panel content goes here
    </div>
</div>