Флажок внутри вкладки переключения bootstrap

Question

Я пытаюсь создать вкладки с функциональностью, чтобы добавить флажок, но с подарком data-toggle="tabs" флажок, кажется, не работает.

https://jsfiddle.net/moviecrew/gdpvuh4r/2/ здесь это моя скрипка

Есть ли способ заставить флажок работать, когда он находится внутри переключателя вкладок?

Спасибо

Answer 1

РЕДАКТИРОВАТЬ

data-togle="tab" событие клика имеет preventDefault() внутри bootstrap.js и, поскольку ваш checkbox находится внутри a[data-toggle="tab"], когда вы нажимаете на него, вы фактически нажимаете на <a> и событие click предотвращается bootstrap.

Если вы все еще хотите, чтобы оно было внутри data-toggle="tab", вам понадобятся дополнительные javascript logi c для проверки / снимите флажок вручную, примерно так:

$('[data-toggle="tab"]').click(function() {
    var isChecked = $(this).find(':checkbox').prop('checked');
    $(this).find(':checkbox').prop('checked', !isChecked);
})