Tom Select - 在选择父选项时防止选择子选项

Question

我正在使用 Tom Select 和多选下拉菜单来创建文件夹结构，其中选项按父文件夹分组。例如，如果我选择像

app

这样的顶级文件夹，我希望自动禁用像

app/Helpers

或

app/Http

这样的任何子选项，从而防止它们被选择。

这是当前设置：

• 将 Tom Select 与

  checkbox_options

  插件结合使用。

• select

  字段包含

  optgroup

  元素，选项具有

  data-groups

  属性来指示其父分组。

HTML 结构：

<select id="myFolders" name="folders[]" multiple autocomplete="off">
    <optgroup label="app">
        <option value="app" selected>app</option>
        <option value="app/Helpers">app/Helpers</option>
        <option value="app/Http">app/Http</option>
    </optgroup>
</select>

Javascript我试过了。

const tomSelect = new TomSelect('#myFolders', {
    plugins: {
        'checkbox_options': {
            'checkedClassNames':   ['ts-checked'],
            'uncheckedClassNames': ['ts-unchecked'],
            'className': 'form-check-input'
        },
        'remove_button': {
            title:'Remove this item',
        }
    },
    onChange: function () {
        updateDisabledOptions(this);
    }
});

function updateDisabledOptions(tomSelectInstance) {
    const selectedValues = tomSelectInstance.getValue();
    const selectedGroups = new Set(selectedValues);

    Object.values(tomSelectInstance.options).forEach(option => {
        const optionElement = document.querySelector(`.ts-dropdown [data-value="${option.value}"]`);
        
        if (optionElement) {
            const checkbox = optionElement.querySelector('.form-check-input');

            if (checkbox) {
                const isChildOfSelectedGroup = Array.from(selectedGroups).some(
                    group => option.value.startsWith(group + '/')
                );

                if (isChildOfSelectedGroup) {
                    optionElement.classList.add('disabled');
                    checkbox.setAttribute('disabled', true);
                } else {
                    optionElement.classList.remove('disabled');
                    checkbox.removeAttribute('disabled');
                }
            }
        }
    });
}

问题： 该函数正在向子复选框添加

disabled

属性，但并不阻止它们被选中。即使设置了

aria-disabled

和

disabled

属性，复选框仍然可选。

预期结果： 如果选择像

app

这样的父文件夹，则任何子文件夹（例如

app/Helpers

）应自动为

disabled

并且不可选择。

问题：

• 有没有办法确保子复选框在选择父复选框时在

  Tom Select

  中变得不可选择？
• 我是否缺少

  Tom Select

  中的任何具体处理来实现此目的？

欢迎任何建议或代码修改！预先感谢您。

jsFiddle 链接这里

（无 Jquery）

Answer 1

谢谢，@La Ngoc，我更改了功能

updateDisbaledOptions

，当选择子项并且稍后用户选择父项时，所选子项将被自动删除。这是最终的功能..也许对其他人有帮助。

 const updateDisabledOptions = (tomSelectInstance) => {
            const selectedValues = tomSelectInstance.getValue();
            const parents = [...Object.values(tomSelectInstance.optgroups)].map(o => o.label);

            parents.forEach(parent => {
                const options = [...Object.values(tomSelectInstance.options)];
                const children = options.filter(option => option.value.startsWith(`${parent}/`));

                children.forEach(child => {
                    if (selectedValues.includes(parent)) {
                        tomSelectInstance.removeItem(child.value);
                        tomSelectInstance.updateOption(child.value, {
                            value: child.value,
                            text: child.text,
                            disabled: true,
                        });
                    } else {
                        tomSelectInstance.updateOption(child.value, {
                            value: child.value,
                            text: child.text,
                            disabled: false,
                        });
                    }
                });
            });
};