bootstrap checkbox button event propagation issue

Question

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.

Answer 1

Can you please try this

$(".btn-group.checkbox .btn").on("change", function (e) {
    if (!e) var e = window.event
    e.cancelBubble = true;
    //try this
    if (e.stopPropagation) e.stopPropagation();    
    //if above code is not working then try
    //if (e.stopImmediatePropagation) e.stopImmediatePropagation();
});