JQueryUI аккордеон с флажками

Я пытаюсь установить флажок в каждом из заголовков аккордеона, чтобы указать, должно ли что-то быть отключено или нет. Флажок отображается хорошо, однако его нельзя кликать, поскольку весь заголовок аккордеона связан с тегом <a>. Установка флажка вне тега <a> делает флажок под заголовком, который не является тем, что я хочу, и он по-прежнему не доступен для клика.

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

Ответ 1

Вы можете использовать stopPropagation(), чтобы исправить это.

пример jsfiddle

что-то вроде

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

Ответ 2

Я бы взял управление ввода из гиперссылки.

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

Ответ 3

Попробуйте установить флажок, отмеченный флажком acordion click, используя

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

в html и

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

в этом случае.

Ответ 4

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