MultiSelect Dropdown - Disable Certain Options Depending on Already Selected Options

[kpcollier]

This seems like a tough one that I'm not sure is possible.

I'd like to disable specific options when another option is selected in a multi select dropdown. In example, if the user selects "Commercial", then the "Commercial Leads" option will be disabled. I'm trying to prevent them from selecting both. 

Below is my attempt, but I know it is flawed because I'm not exactly sure how to select the individual options when their ID is something like "InsertRecordDepartment_(random text)_unchecked_0".

document.addEventListener('DataPageReady', function () {
    var multiSelect = document.querySelector("input[id^='InsertRecordDepartment_MS']");

    multiSelect.addEventListener('change', function () {

        var selectedValue = multiSelect.value;

        if (selectedValue === 'Commercial') {
            disableOption('Commercial Leads');
        } else if (selectedValue === 'Residential') {
            disableOption('Residential Leads');
        } else {
            enableAllOptions();
        }
    });

    // Function to disable a specific option
    function disableOption(optionText) {
        var options = multiSelect.querySelectorAll('.cbFormMultiSelectText');
        options.forEach(function (option) {
            var label = option.querySelector('label');
            if (label.textContent === optionText) {
                var checkbox = option.querySelector('input[type="checkbox"]');
                checkbox.disabled = true;
            }
        });
    }

    // Function to enable all options
    function enableAllOptions() {
        var options = multiSelect.querySelectorAll('.cbFormMultiSelectText');
        options.forEach(function (option) {
            var checkbox = option.querySelector('input[type="checkbox"]');
            checkbox.disabled = false;
        });
    }
});

Any help would be appreciated!

[Volomeister]

Hi @kpcollier

Try this instead:
 

<script>
if (document.addInputListener == undefined) {

const inputName = 'List_String_1'

const dependencies = [{
selectedOptionName: 'Watering and irrigation',
disabledOptionsArr: ['Garden equipment', 'Landscaping']
},
{
selectedOptionName: 'Picnic goods',
disabledOptionsArr: ['Grids', 'Swimming pools, baths and saunas']
}
]

const getdisabledOptionsArr = (selectedOption) => {

let disabledOptionsArr
for (let i=0; i<dependencies.length; i++) {
if (dependencies[i].selectedOptionName == selectedOption) {
disabledOptionsArr = dependencies[i].disabledOptionsArr
break
}}
if (disabledOptionsArr == undefined) return []
  return disabledOptionsArr
}

const hideOptionByName = (label) => {

let labelsArr = document.querySelectorAll('.cbFormMultiSelectText label')
for (let i=0; i< labelsArr.length; i++) {
if (labelsArr[i].innerText == label) {
labelsArr[i].parentElement.style.display = 'none'
if (labelsArr[i].previousElementSibling.checked) {labelsArr[i].previousElementSibling.click()}
break
}
}
}
const showAllOptions = () => {
document.querySelectorAll('.cbFormMultiSelectText').forEach(cbFormMultiSelectText=>{
cbFormMultiSelectText.style.display = 'block'
})
}

const updateMultiSelectDropDown = () => {
showAllOptions()
document.querySelectorAll('.cbFormMultiSelectText input:checked').forEach(input=>{

let disabledOptionsArr = getdisabledOptionsArr(input.nextElementSibling.innerText)

disabledOptionsArr.forEach(label=>{hideOptionByName(label)})
})

}


const addInputListener = () => {
let hiddenInput = document.querySelector(`[name="InsertRecord${inputName}"]`)
if (hiddenInput==null) {return}

hiddenInput.addEventListener('change', updateMultiSelectDropDown)

}

document.addEventListener('DataPageReady', addInputListener)
document.addInputListener = 'enabled'
}
</script>

You need to set up dependencies to draw the relation between the selected option name and what options should be hidden if it is selected.

const dependencies = [{
selectedOptionName: 'Watering and irrigation',
disabledOptionsArr: ['Garden equipment', 'Landscaping']
},
{
selectedOptionName: 'Picnic goods',
disabledOptionsArr: ['Grids', 'Swimming pools, baths and saunas']
}
]

Live example based on the solution above: https://c7eku786.caspio.com/dp/7f80b000902e9863557041ad9ec5


 

[kpcollier]

Thanks a ton, @Volomeister! I appreciate the help.