Bootstrap Multiselect限制选中数时input.parent方法失效问题

基于Bootstrap Multiselect实现多选组件，需要限制复选框最多选中4项，编写对应jQuery逻辑后出现异常：选中项数量达到4个时，input.parent('.multiselect-option').addClass() 逻辑无法给父元素添加禁用类，仍然可以选中超过4个选项。
涉及的原代码如下：

原JS实现 #

$('.listboxForCountry').multiselect({
    onChange: function (option, checked) {
        // Get selected options.
        var selectedOptions = $('.listboxForCountry option:selected');

        if (selectedOptions.length >= 4) {
            // Disable all other checkboxes.
            var nonSelectedOptions = $('.listboxForCountry option').filter(function () {
                return !$(this).is(':selected');
            });

            nonSelectedOptions.each(function () {
                var input = $('input[value="' + $(this).val() + '"]');
                input.prop('disabled', true);
                input.parent('.multiselect-option').addClass('disabled');
            });
        }
        else {
            // Enable all checkboxes.
            $('.listboxForCountry option').each(function () {
                var input = $('input[value="' + $(this).val() + '"]');
                input.prop('disabled', false);
                input.parent('.multiselect-option').addClass('disabled');
            });
        }
    },
    maxHeight: 250,
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    buttonWidth: '100%',
    buttonTextAlignment: 'left'
});

原HTML实现 #

@Html.ListBoxFor(m => m.FormData.SelectedCountry, new SelectList(Model.Countries, "CategoryDisplayName", "CategoryDisplayName"), new { @class = "listboxForCountry" })

代码一共存在3处错误：

• DOM查找API使用错误：parent()方法仅能匹配元素的直接父节点，Bootstrap Multiselect渲染后的DOM结构中，checkbox input标签外层嵌套了label标签，直接父元素不是.multiselect-option，因此匹配不到目标元素，无法添加禁用类。
• 恢复可选的逻辑写反：else分支的作用是选中数低于4时恢复所有选项可选，但代码里错误调用addClass('disabled')给选项加禁用类，和预期逻辑完全相反。
• 元素查找范围过大：直接全局查找$('input[value=...]')，如果页面存在多个同值的表单元素，会出现匹配冲突，导致操作的不是当前组件下的checkbox。

替换原JS初始化逻辑为以下代码即可：

$('.listboxForCountry').multiselect({
    onChange: function (option, checked) {
        // 限定查找范围为当前multiselect实例，避免全局匹配冲突
        const $currentSelect = $(this.$select);
        const $dropdownContainer = this.$container.find('.multiselect-container');
        const selectedOptions = $currentSelect.find('option:selected');

        if (selectedOptions.length >= 4) {
            // 禁用所有未选中选项
            const nonSelectedOptions = $currentSelect.find('option').not(':selected');
            nonSelectedOptions.each(function () {
                const optionVal = $(this).val();
                const $checkbox = $dropdownContainer.find(`input[value="${optionVal}"]`);
                $checkbox.prop('disabled', true);
                // 用closest向上查找匹配.multiselect-option的祖先元素，解决嵌套层级匹配问题
                $checkbox.closest('.multiselect-option').addClass('disabled');
            });
        } else {
            // 恢复所有选项可选
            $currentSelect.find('option').each(function () {
                const optionVal = $(this).val();
                const $checkbox = $dropdownContainer.find(`input[value="${optionVal}"]`);
                $checkbox.prop('disabled', false);
                // 移除禁用类
                $checkbox.closest('.multiselect-option').removeClass('disabled');
            });
        }
    },
    maxHeight: 250,
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    buttonWidth: '100%',
    buttonTextAlignment: 'left'
});

• 查找多级祖先元素匹配指定选择器时，不要用parent()，要使用closest()方法，该方法会逐级向上查找直到找到匹配的元素，不会受中间嵌套层级影响。
• 操作组件内部DOM时，尽量基于组件实例提供的DOM引用限定查找范围，不要全局查询元素，避免同页面多组件时出现干扰。

内容的提问来源于stack exchange，提问作者Kamesh Ganegama