javascript - bootstrap checkbox button event propagation issue -

javascript - bootstrap checkbox button event propagation issue -

i have custom panel bar div panel header section. clicking on panel should expand/collapse panel content, works fine using jquery toggle.

in panel header i've placed bootstrap checkbox intention beingness checking box activates panel, has no impact on whether or not panel content expands or collapses.

the problem:

clicking checkbox checks , unchecks bootstrap checkbox expands/collapses panel content.

what i've been trying:

i've been trying stop propagation on checkbox thinking ever bootstrap attaching event might able stop click event happening on panel header.

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

i've tried click event instead of alter , i've tried on .btn element within btn-group:

//try rid of event bubbling 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 checkbox still causing panel content show , hide.

can please seek $(".btn-group.checkbox .btn").on("change", function (e) { if (!e) var e = window.event e.cancelbubble = true; //try if (e.stoppropagation) e.stoppropagation(); //if above code not working seek //if (e.stopimmediatepropagation) e.stopimmediatepropagation(); }); hope works :)

javascript jquery checkbox twitter-bootstrap-3 stoppropagation