如何使用 bootstrap 4 个按钮组将最大值添加到复选框表单

Question

我有这个表单，其中包含使用复选框和单选按钮的问题，复选框问题可以有一个最大数量的检查需要转到下一个问题。对于复选框和单选按钮，我使用 bootstrap 按钮。

https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons

我使用 jquery 更改功能来查看复选框何时发生变化，当发生变化时，我检查检查了多少并将其与最大数量进行比较。如果选中的数量高于最大值，那么我取消选中刚刚选中的复选框。问题是，当取消选中复选框时，它会更改复选框，我得到一个无限循环并最终得到错误 "too much recursion".

关于如何完成这项工作的任何线索？我试过 .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 是输入 class.

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;
});

如何使用 bootstrap 4 个按钮组将最大值添加到复选框表单

How can i add a max to a checkbox form with bootstrap 4 button-groups

javascript

jquery

forms

bootstrap-4

buttongroup