Limit Certain Selections in List Box

[kpcollier]

I have a multi-select list box. This is used for configuring what type of glass shower you want. Most of these selections can work together - but there are a few combinations that I would like to limit the user from selecting.

What is the best way to 'grey out' a selection based on already selected values in a list box?

The Multi-Select Listbox field name is Shower_Layout, with the following options:

Inline, Door Only, Door And Panel, Door + Multiple Panels, 90 Degree Return, Other Degree Return, Step Up/Notch, and Transom. 

In example, if the user first selects 90 Degree Return, I would like the 'Door Only' and 'Inline' to be non-selectable.  I tried with JS, but I couldn't get anything to work. I need a little kickstart, please!

[Hastur]

Hello @kpcollier
I think that the better idea will be to use Cascading to restrict the amount of values you get in multi-select list box.
You can check this article to get familiar with this feature - https://howto.caspio.com/datapages/datapage-components/cascading-elements/

You can use virtual field to  define to category. Then you may use this field as the parent field to get appropriate set of options in multi-select list box.

[kpcollier]

6 hours ago, Andrew said:

I think that the better idea will be to use Cascading to restrict the amount of values you get in multi-select list box.

I don't believe you can use cascading with a multi-select list box datatype. And, with regular list box, the multi select feature isn't included in Submission forms. I should have mentioned that I was using a sub form.

[Hastur]

You can use cascading with list-box.

To implement the multi-select use this code in the header of the datapage:

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
 document.querySelector('select[name="name_of_your_select_field"]').setAttribute('multiple', 'multiple');
});
</script>

You can check the name of select using the DevTools of a browser you use.