Как я могу добавить максимум к форме флажка с начальной загрузкой 4 группы кнопок

Question

У меня есть эта форма с вопросами, в которых используются флажки и радиокнопки, для вопросов флажков может быть указано максимальное количество флажков, необходимых для перехода к следующему вопросу. Для флажков и переключателей я использую кнопки начальной загрузки.

https://getbootstrap.com/docs/4.1/components/buttons/

Я использую функцию изменения jquery, чтобы видеть, когда что-то случается с флажком, когда что-то меняется, я проверяю, сколько проверено и сравниваю это с максимальной суммой. Если количество проверенных выше, чем максимальное, то я снимаю флажок, который был только что отмечен. Проблема в том, что когда флажок снят, он меняет флажок, и я получаю бесконечный цикл и в итоге получаю ошибку "слишком много рекурсии".

Любая подсказка о том, как я могу сделать эту работу? Я пробовал.click вместо.change, но потом, когда я получаю проверенное количество, я получаю неправильный номер.

Автор сценария:

function checkboxHandler(aThis){
    if($('.pro-block.pb-active').find('.proanalysecheck:checked').length > $(aThis).data('max')) {
        if($(aThis).prop('checked') == true){
            $(aThis).parent('label').button('toggle');
        }
    }
}


$('#frmProinvite .proanalysecheck').change( function(e) {
    checkboxHandler(this);
});

.pb-block.pb-active это текущий вопрос div и .proanalysecheck это входной класс.

Answer 1

Как насчет использования флага, который указывает, что изменение вызвано достижением максимальных значений? Это должно сделать работу.

var changeByMaxReached = false; 
function checkboxHandler(aThis){
    if(!changeByMaxReached && $('.pro-block.pb-active').find('.proanalysecheck:checked').length > $(aThis).data('max')) {
        if($(aThis).prop('checked') == true){
            changeByMaxReached = true;
            $(aThis).parent('label').button('toggle');
        }
    }
}


$('#frmProinvite .proanalysecheck').change( function(e) {
    if (!changeByMaxReached) {
        checkboxHandler(this);
    } 
    changeByMaxReached = false;
});