jQueryUI acordeón con casillas de verificación

Question

Estoy tratando de poner una casilla de verificación en cada uno de mis títulos de acordeón para indicar si algo debe ser desactivado o no. La casilla de verificación se muestra bien, sin embargo, no se puede hacer clic ya que todo el encabezado del acordeón está vinculado a la etiqueta <a>. Poner la casilla de verificación fuera de la etiqueta <a> hace que la casilla de verificación aparezca debajo del encabezado, que no es lo que quiero, y todavía no se puede hacer clic.

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

Answer 1

Se puede utilizar para solucionar este stopPropagation()

example jsfiddle

algo así como

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

Answer 2

Quitaría el control de entrada del hipervínculo.

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

Answer 3

intente configurar la casilla de verificación para comprobar en el caso de acordeón clic, usando

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

en el html y

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

en el evento.

Answer 4

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