Disabling individual selection tags based on the selection of other Tags

Hello everyone!

So, first disclaimer, I’d consider myself an amateur coder who can kind of understand what he’s reading and then edit it to fit my needs.

I’ve included images of my site and the dataset, along with code snippets for my site.

Now! A bit of background. Below, you can see I’m populating a repeater based on the input of two different selection tags. Currently, if you have a length selected, it’ll show all items with those lengths. Then, if you click one of the finishes, it’ll populate the repeater with an AND (I’m utilizing hasSome vs hasAll. One day I’ll create an if else statement where if only one is selected it’ll be hasSome vs if two are selected it’ll be hasAll) and cross reference the two.

This can lead to there being instances of nothing showing because both options aren’t available.

I know there are ways for me to populate selections tags based on a variety of inputs, but that’s all a bit over my head.

So, I was wondering if there is a way to gray out or ‘disable’ certain option tags of one selection tag based on what is selected in the other selection tag.

In the dataset image, you can see for instance that Alder is only available in 320’ lengths and only as a Sanded finish.
Which means that if you click on a 250’ it would filter out the Alder, and then if you select Sanded, it shows nothing because both options aren’t true.

Is is possible to somehow visually gray out or ‘disable’ the “Sanded” tag based on the input from the Lengths selection tags? I’m imaging some sort of if else statement based on a selection tag from SelectionTag1(Lengths) and then ‘if’ the options for SelectionTag2(Finishes) exist within the fields of the dataset that contain the the selection option from “Lengths”, show, else ‘disable’ or gray out.

I’m aware of how to .show or .hide based on an $w(‘#object’), but an unsure of how to classify a selection tag based with $item.

I hope this is all clear enough, I’m happy to simplify or explain anything further.

Thanks in advance.

import wixData from 'wix-data';

//-------- USER-INTERFACE -------------------------------------------------
var DBFIELDS = []
var DATABASE = "Edgebanding"
var DBLIMIT = 1000
var REPEATER = "EdgeRepAll"
//-----------------------------
DBFIELDS[0] = "lengths"; //<---simple adding new TAGS-DATAFIELD here --> 1-st. CBG        
DBFIELDS[1] = "finishes"; //<---simple adding new TAGS-DATAFIELD here --> 2-nd. CBG
//-------- USER-INTERFACE -------------------------------------------------
$w.onReady(()=>{
    wixData.query(DATABASE)
   .limit(DBLIMIT)
   .find()
   .then(async(results)=>{console.log(results.items);
   });

    $w('#LengthsST, #FinishesST').onChange(()=>{
       populateRepeater($w('#LengthsST').value, $w('#FinishesST').value)
    });
    $w('#Reset').onClick(()=> {
       $w("#LengthsST, #FinishesST").value = undefined; populateRepeater($w('#LengthsST').value, $w('#FinishesST').value);
    }); 
    $w('#GrayOut').onClick(()=> {
       $item('#')
    }); 
});
function populateRepeater(selectedOption1, selectedOption2) {
 let dataQuery = wixData.query(DATABASE);
 if (selectedOption1.length>0){dataQuery = dataQuery.hasSome(DBFIELDS[0], selectedOption1);}
 if (selectedOption2.length>0){dataQuery = dataQuery.hasSome(DBFIELDS[1], selectedOption2);}
    dataQuery.find()
 .then(results => {
    const filteredItems = results.items;
    $w('#'+REPEATER).data = filteredItems;
 })
}

<3

Any ideas?