Checkbox isn't clickable inside a accordion list [duplicate]

Question

I have a unordered list with some objects, when you click a <li> the list will minimize and when you click it again it will expand. I'm using jQuery UI's API on Accordion, the problem is that my checkbox inside my <li> isn't working. It's impossible for me to get it to work, and no "layers" is on top it.

I've tried giving the checkbox position:absolute; z-index: 1000000000 but with no result. I have also tried creating functions which would update the value on click but same there. No luck...

The checkbox that doesn't work is the one next to the text "Publicera:"

See my JSFiddle, why won't jQuery UI let me my checkbox?

Answer 1

just add this jquery event which will prevent any parent handlers from being notified of the event:

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

});

Answer 2

It is because the accordion plugin is calling prevent default on the header element click event, so when you click on the checkbox its default action is prevented.

One possible solution is to stop the propagation of the click event in the header so that it will not trigger the accordion header click handler.

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

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

Demo: Fiddle