When choosing a certain option, put down the disabled property for the rest?

Question

JavaScript

<select id="status" class="form-control select2" name="status" multiple onchange='myStatus()'>
   <option value='-222'>Просрочено</option>
   <option value='1'>В работе</option>
   <option value='2'>Выполнено</option>
</select>

function myStatus() {
  var op = document.getElementById("status");

  for (var i = 0; i < op.length; i++) {
    (op[i].value.toLowerCase() != "-222") ? op[i].disabled = true : op[i].disabled = false;
  }

}

It is necessary that when you select the "Expired" status, the rest become unavailable. Conversely, if any status other than "Overdue" is selected, then "Overdue" becomes unavailable for selection.

PS There should be an option to "cancel". A person may indicate the status erroneously.

Answer 1

const select = document.querySelector('#status');

select.addEventListener('change', function() {
  const val = this.value;
  const expiredVal = '-222';
  const isExpired = val === expiredVal;

  [...this.options].forEach(n => n.disabled = val && (
    (n.value === expiredVal && !isExpired) ||
    (n.value !== expiredVal && isExpired)
  ));
});

// это для отмены - сделайте кнопку <button id="reset">сбросить</button>
document.querySelector('#reset').addEventListener('click', function() {
  select.value = null;
  select.dispatchEvent(new Event('change'));
});

Answer 2

Why do you need disabled, you don't need to do that, just deselect the type

document.querySelector("#status").addEventListener("change",function (evt) {
  	Array.from(evt.target.children).forEach((e)=>{
    	if(evt.srcElement.value == "-222" && e.value != "-222" || evt.srcElement.value != "-222" && e.value == "-222")
    		e.selected = false;        
    });
});

Or so

document.querySelector("#status").addEventListener("change", evt=> {
  	[...evt.target.children].forEach(e=> e.selected =e.selected && !(evt.srcElement.value == "-222" && e.value != "-222" || evt.srcElement.value != "-222" && e.value == "-222") );
});