Как сделать весь модуль флажка кликабельным в Bootstrap 5 ⇐ Jquery

[Anonymous]

Я уже давно пытаюсь сделать кликабельным весь модуль, а не только флажок или метку.
Если вы выполните поиск по этой теме в stackoverflow, вы можете найти вопросКак сделать кликабельным весь пользовательский флажок/раздел — не только метку + ввод
но это не мой случай.
Это пользовательский флажок, и я хочу его использовать обычный.
Итак, в конце посмотрите мою попытку использования этого кода во фрагменте (немного JavaScript и JQuery)

Код: Выделить всё

var checkboxes = []; //There are multiple checkboxes so an array it's needed to simplify [pretend nothing happened 😅]
checkboxes[0] = document.body.querySelector('#HEYY');
checkboxes[0].addEventListener('change', (e) => {
console.log('CLICKED@'+Date.now());
});

$(document).ready(function() {
$('.ma_checkbox_module').on('click', function(e) {
//e.preventDefault();
//e.stopPropagation();
if (e.target.tagName == "DIV") {
let checkbox = $(this).find('input');
if (checkbox.prop('checked') == true) {
checkbox.prop('checked', false);
} else {
checkbox.prop('checked', true);
}
}
});
});

Код: Выделить всё

HEYY

Как видите, это работает хорошо, но событие, при котором оно не срабатывает в некоторых случаях (удобно использовать клавиатуру, нужно управлять щелчком).
Если вы нажмете на определенную точку между метка и флажок, флажок меняет состояние, а событие изменения - нет сработало. Вместо этого нажатие на метку или флажок вызывает изменение.
Как добиться идеальной работы без изменения HTML-кода?

Подробнее здесь: https://stackoverflow.com/questions/792 ... ootstrap-5