The checkbox is not included in the list of accordion

Question

I have an unordered list with some objects, when you click <li>, the list is minimized, and when you click it again, it will expand. I use the jQuery API on Accordion , the problem is that my checkbox inside mine is <li>not working. It’s impossible for me to make it work, and there are no “layers” on it.

I tried to check the box position:absolute; z-index: 1000000000, but with no result. I also tried to create functions that would update the value on click, but in the same place. Bad luck...

A flag that does not work is located next to the text "Publicera:"

See my JSFiddle , why won't jQuery user interface be installed?

Answer 1

This is due to the fact that the accordion plugin causes a default warning in the click event of the title element, so when you click on this flag, its action is prevented by default.

One possible solution is to stop the click event from propagating in the header so that it does not invoke the click handler of the accordion header.

$(".mm-panel").accordion({
    collapsible: true
});

$(".mm-panel .ui-accordion-header input[type=checkbox]").click(function(e){
    e.stopPropagation();
})

Demo: Fiddle

Answer 2

just add this jquery event, which will prevent notification to the parent event handlers:

$("input[type=checkbox]").click(function(event){
    event.stopPropagation();

});

Answer 3

$('#panels input[type="checkbox"]').click(function(e) {
    e.stopPropagation();
});

Fiddle: https://jsfiddle.net/msy345gv/2/