При выборе определенного option, остальным проставить свойство disabled?

Question

[BuBux]

<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;
	}

}

Необходимо, чтобы при выборе статуса "Просрочено", остальные стали не доступны. И наоборот, если выбран любой статус кроме "Просрочено", то "Просрочено" становится не доступным к выбору.

P.S. Должна быть возможность "отмены". Человек может указать статус ошибочно.

Comments

[Дмитрий Беляев]

а у пользователя нет права на ошибку?

[Дмитрий Беляев]

а еще я вангую проблемы при работе с клавиатуры

[BuBux]

Дмитрий Беляев, в плане чего?

[BuBux]

Дмитрий Беляев, тогда как лучше решить данную задачу?

[twobomb]

Менять нужно не disabled, а selected

[BuBux]

twobomb, но ведь мне надо свойство лишь добавить, чтобы option был не доступен к выбору. Разве это не disabled надо указать true?

[Дмитрий Беляев]

BuBux, ну например банально при выборе стрелками я не смогу выбрать ничего кроме первого пункта "просрочено", потому что как только выбор переключится на него, Вы заблокируете мне все остальные варианты.

[BuBux]

Дмитрий Беляев, понял Вас. А как в данном случае организовать логику? По возможности хотелось бы решение, JS только начал изучать. И плюс ко всему я не могу задать событие в js-файле, приходится писать внутри тега select событие onchange. Потому что используется class="form-control select2", он не дает возможности писать событие внутри js-файла.

[Дмитрий Беляев]

BuBux, еще и select2... это ужасный плагин, его писали макаки...

Answer 1

[twobomb]

Зачем вам disabled, не нужно так делать, просто снимайте выделение типа

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;        
    });
});

Или так

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") );
});

Comments

[BuBux]

1. Не могу писать события внутри js-файла из-за class="form-control select2". В данном случае могу лишь прописывать вызов функции по событию внутри тега select.
2. Как указал Дмитрий Беляев выше, а если ошибочно выбран option?

[twobomb]

BuBux,
1. Что мешает вешать обработчик? То что select2 сам генерирует структуру?
2. Именно поэтому я не использую disable, а использую selected чтобы при ошибке можно было поменять

[BuBux]

twobomb, так и не нашел в интернете способа, который бы помог вешать обработчик не внутри тега html, если используется класс select2

[twobomb]

BuBux, попробуйте событие 'select2:select'

[twobomb]

BuBux, засуньте код в

window.onload = function(){
//сюда
}

[BuBux]

twobomb, пробовал так:

window.onload = function () {
	$("#status").on("select2:select", function (e) {
		console.log('+');
	});
}

и так:

window.onload = function () {
	document.querySelector("#status").addEventListener("select2:select", function () {
		console.log('+');
	});
}

Никакой реакции.

[twobomb]

BuBux, обычный

$("#status").on("change",function(){

})

Должен работать