如何使用引导程序 4 按钮组向复选框表单添加最大值答案

【问题标题】：How can i add a max to a checkbox form with bootstrap 4 button-groups如何使用引导程序 4 按钮组向复选框表单添加最大值
【发布时间】：2018-08-15 12:42:41
【问题描述】：

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

https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-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 是输入类。

【问题讨论】：

标签： javascript jquery forms bootstrap-4 buttongroup

【解决方案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;
});

【讨论】：