Я пытаюсь поставить флажок в каждом из заголовков моего аккордеона, чтобы указать, следует ли что-то отключить или нет. Флажок отображается нормально, однако его нельзя нажать, так как весь заголовок аккордеона связан с<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>