Question

我在此表单中包含使用复选框和单选按钮的问题，该复选框问题可以具有转到下一个问题所需的最大已检查数量。对于复选框和单选按钮，我使用的是自举按钮。

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

我使用jquery change功能查看复选框何时发生变化，何时发生变化，我检查了被检查的数量并将其与最大数量进行比较。如果检查的数量高于最大数量，则我取消选中刚刚选中的复选框。问题是，当一个复选框取消选中时，它会更改该复选框，并且我得到一个无限循环并最终收到错误“太多的递归”。

关于如何进行这项工作的任何线索？我尝试用.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;
});

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

1 个答案: