Динамический флажок в пределах аккордеона

Question

Я динамически заполняю данные в аккордеоне jQuery. Мне нужно установить флажок перед текстом <h2>.

<div id="checkbox"> 
    <h2> 
    <span> 
     <input type="checkbox" class="mycheck" value="apple" /> 
    </span> 
    Text 1 
    </h2> 
    <div> content 1 </div> 
</div> 

Мой вопрос: когда я нажимаю на галочку, аккордеон расширяется, и флажок не проверяется. Как сделать отмеченную метку отображаемой и предотвратить расширение аккордеона при нажатии на этот флажок?

$("#accordianParent").accordion({ 
     collapsible: true,active: false 
}); 

$(document).on('click', '.mycheck', function(ev){ 
     ev.stopPropagation(); 
     console.log("clicked!"); 
}); 

Answer 1

Аккордеон предотвращает дефолт по умолчанию при использовании его внутри элемента.

Вы можете использовать реактивировать/beforeactivate событие, чтобы проверить его вручную:

$("#accordianParent").accordion({ 
    collapsible: true,active: false, 

    beforeActivate: function(event, ui) { 
     var checked = ui.newHeader.length ? true : false; 
     $(event.currentTarget).find('input[type="checkbox"]').prop('checked', checked); 
    } 

}); 
$(document).on('click', '.mycheck', function(ev){ 
    ev.stopPropagation(); 
    console.log("clicked!"); 
});