jQueryUI accordion with checkboxes

问题

I'm trying to put a checkbox in each of my accordion headings to indicate whether something should be disabled or not. The checkbox shows up fine, however, its not clickable as the whole accordion header is linked to the <a> tag. Putting the checkbox outside the <a> tag makes the checkbox appear underneath the heading, which is not what I want, and it still isn't clickable either.

<div id="accordion">
    <h3><a href="#">Text <span id="id">More text<input type="checkbox"/></span></a></h3>
    <div>content etc</div>
</div>

回答1:

You can use stopPropagation() to fix this

example jsfiddle

something like

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

回答2:

I would be taking the input control out of the hyperlink.

<h3><a href="#">Text</a><span id="id">More text<input type="checkbox"/></span></h3>

回答3:

<input type="checkbox" onclick="event.stopPropagation()" />

回答4:

Try setting the checkbox to checked in the acordion click event, using

<input type="checkbox" name="foo" />

in the html and

$('input[name=foo]').attr('checked', true);

in the event.

来源：https://stackoverflow.com/questions/7426425/jqueryui-accordion-with-checkboxes