JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<select name="n1" id="box_g1">
	<option value="Default">Default</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>
</select>

<select name="n2" id="box_g2">
	<option value="Disabled">Disabled</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>
</select>

<select name="n3" id="box_g3">
	<option value="Disabled">Disabled</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>
</select>
<select name="n4" id="box_g4">
	<option value="Disabled">Disabled</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>

</select>
<select name="n5" id="box_g5">
	<option value="Disabled">Disabled</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>

</select>

JavaScript

$(function(){
    $('select').change(function(){
        if($(this).attr('id') == 'box_g1' && $(this).val() == 'Default'){
            $('select').not(this).prop('disabled', true).val('Disabled');
        } else {
            $('select').not(this).removeProp('disabled');
            
            $('select option').removeProp('disabled');
            $('select').each(function(){
                var val = $(this).val();
                if(val != 'Default' || val != 'Disabled'){
                    $('select option[value="'+val+'"]').not(this).prop('disabled', true);
                }
            });
        }
    });
});