accordion jQueryUI với hộp kiểm

Question

Tôi đang cố gắng để đặt một hộp kiểm trong mỗi tiêu đề accordion của tôi để chỉ ra cho dù một cái gì đó nên bị vô hiệu hóa hay không. Các hộp kiểm cho thấy tốt, tuy nhiên, nó không thể nhấp như tiêu đề toàn bộ accordion được liên kết với các tag <a>. Đặt hộp kiểm bên ngoài thẻ <a> làm cho hộp kiểm xuất hiện bên dưới tiêu đề, không phải là thứ tôi muốn và nó cũng không thể nhấp vào được.

<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

Bạn có thể sử dụng để sửa chữa stopPropagation()

example jsfiddle

một cái gì đó này như

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

Answer 2

Tôi sẽ lấy điều khiển đầu vào ra khỏi siêu liên kết.

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

Answer 3

Hãy thử thiết lập các hộp kiểm để kiểm tra trong trường hợp acordion nhấp chuột, sử dụng

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

trong html và

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

trong sự kiện này.

Answer 4

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