GOAL: Create a script that disables other dropdown select lists using the same class ("selectClass") if an item is selected from one of the dropdowns selects. Or, if the item is unselected, then all dropdown selects became selectable again to allow for people who change their minds/didn't understand at first what would happen.

The goal is to allow a user to only be able to select one item (total) from X amount of lists possible - you can have apples, or oranges, or pairs, but you can only have one type of fruit (for this example)

PROBLEM: I am unable to get the list to be selectable again after a selection has been made even if the default no value option is selected.

EFFORTS: I've put a few hours into this script and have gotten as far as I can it seems. I've looked through Stack, Googled, and searched other forums and bulletin boards, and Reddit. I've found some things I hoped would help me reach my goal, but I wasn't able to understand them due to my newb-ness, or they weren't applicable enough to help me reach my goal. I have run the script through javascript validators to make sure I've got the syntax correct, etc. I've managed to get pretty far towards my goal (goal was just deactivating the other dropdowns), but I'd like to make the user experience top-notch, and to me that means allowing for a sure to change their mind without needing to reload a page and lose all their unsubmitted data.

THE ASK: I am hoping for help and guidance to make everything re-selectable again by unselecting the selected item from the list that disabled the other dropdown selects; The lists will be generated dynamically.

THE CODE:

<select class="selectClass">
    <option  value="">Apples</option>
    <option value="1">1 Apple</option>
    <option value="2">2 Apple</option>
    <option value="3">3 Apple</option>
</select>
<select class="selectClass">
    <option  value="">Oranges</option>
    <option value="1">1 Orange</option>
    <option value="2">2 Orange</option>
    <option value="3">3 Orange</option>
</select>
<select class="selectClass">
    <option value="" >Pears</option>
    <option value="1">1 Pears</option>
    <option value="2">2 Pears</option>
    <option value="3">3 Pears</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(function () {
        $(".selectClass").on('change', function () {
            $(".selectClass").not($(this)).prop("disabled", "disabled")
        })
    })
</script>