Я думаю, вам нужно обрабатывать основные элементы в отдельности.
$('.item1-first-div').on('change', function() {
var value = $('.item1-first-div').val();
if (value) {
$('.item2-first-div').prop('disabled', true);
} else {
$('.item2-first-div').prop('disabled', false);
}
});
$('.item1-second-div').on('change', function() {
var value = $('.item1-second-div').val();
if (value) {
$('.item2-second-div').prop('disabled', true);
} else {
$('.item2-second-div').prop('disabled', false);
}
});
* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
}
div {
border: 1px solid red;
background-color: rgba(255, 0, 0, 0.1);
padding: 10px 15px;
margin: 15px
}
select {
padding: 5px 7px;
}
.first {
margin-bottom: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
1: <select class="first item1-first-div">
<optgroup label="Div 1, select 1">
<option value="">...</option>
<option>1.1</option>
<option>1.2</option>
</optgroup>
</select><br /> 2: <select class="second item2-first-div">
<optgroup label="Div 1, select 2">
<option value="">...</option>
<option>1.1</option>
<option>1.2</option>
</optgroup>
</select>
</div>
<div>
1: <select class="first item1-second-div">
<optgroup label="Div 2, select 1">
<option value="">...</option>
<option value="1-1">1.1</option>
<option value="1-2">1.2</option>
</optgroup>
</select><br /> 2: <select class="second item2-second-div">
<optgroup label="Div 2, select 2">
<option value="">...</option>
<option value="2-1">1.1</option>
<option value="2-2">1.2</option>
</optgroup>
</select>
</div>