Q: Disable other option in same div, when first one is selected I'm trying to disable all options in the same div as soon as one is selected. I'm stuck.
Tried to use onchange. But whenever I try to disable the selects, it's either all or none and not within the same parent element (like div or table row)
<div>

1: <select class="first">
<optgroup label="Div 1, 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">
<optgroup label="Div 1, select 2">
  <option value="">...</option>
  <option value="1-1">1.1</option>
  <option value="1-2">1.2</option>
  </optgroup>
</select>
</div>
<div>
1: <select class="first">
<optgroup label="Div 2, select 1">

  <option value="">...</option>
  <option value="2-1">1.1</option>
  <option value="2-2">1.2</option>
  </optgroup>
</select><br />
2: <select class="second">
<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>


$('div option:selected').closest(select).attr('disabled','disabled');

Szenario: 
http://jsfiddle.net/1keyup/no8abt0m/11/
Thank you very much in advnace

A: I think you need to handle the main divs individually.


$('.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>


