снятие заблокированных option в select

[olegan4eg88]

Народ помогите добавить условие, чтоб при нажатии "Кнопка 2", не блокировался список select. Но "Кнопка 2" работала в прежнем режиме.

<div class="group">
<label class="primary">
<input data-select="3" type="button">Кнопка 1</label>
<label class="primary">
<input data-select="4" type="button">Кнопка 2</label>
</div>
     <select id="select">
        <option value="1">Выбор пункта 1</option>
        <option value="2">Выбор пункта 2</option>
        <option value="3">Выбор пункта 3</option>
        <option value="4">Выбор пункта 4</option>
        <option value="5">Выбор пункта 5</option>
        <option value="6" checked >Выбор пункта 6</option>
</select>

<script type="text/javascript">
 document.getElementsByClassName('group')[0].addEventListener('click', function(evt) {
    var elem = evt.target;
    if (elem.hasAttribute('data-select')) {
      let select = document.getElementById('select');
      select.value = elem.getAttribute('data-select');
      
      let options = select.getElementsByTagName('option');
      
      Array.from(options, (option, i) => options[i].disabled = (option.value !== select.value ? true : false));

      
      var elem = document.getElementById('select');
      var event = new Event('change');
      elem.dispatchEvent(event);
    }

  }, false);
</script>

[MC-XOBAHCK]

Ну так удалите из скрипта 10 строку:

Array.from(options, (option, i) => options[i].disabled = (option.value !== select.value ? true : false));

Кнопки будут работать, пункты в селекте блокироваться не будут.

[olegan4eg88]

Извините я ошибся в описании цели.
При нажатии "Кнопка 2", не блокировался список select. Но "Кнопка 1" работала в прежнем режиме.

[j0hnik]

<div class="group">
	<label class="primary">
		<input data-select="3" type="button">Кнопка 1</label>
		<label class="primary">
			<input data-select="4" type="button">Кнопка 2</label>
		</div>
		<select id="select">
			<option value="1">Выбор пункта 1</option>
			<option value="2">Выбор пункта 2</option>
			<option value="3">Выбор пункта 3</option>
			<option value="4">Выбор пункта 4</option>
			<option value="5">Выбор пункта 5</option>
			<option value="6" checked>Выбор пункта 6</option>
		</select>

		<script>
			document.querySelector('[data-select="3"]').addEventListener('click', function(evt){
				var sel = document.querySelector('#select'),
				val = this.dataset.select;
				sel.querySelectorAll('#select option').forEach((el,i)=>{
					if(i!=val-1) el.disabled = true;
				});
				sel.value = val;
			});
		</script>

так?

[MC-XOBAHCK]

Вот так?

<div class="group">
    <label class="primary">
        <input data-select="3" type="button">Кнопка 1</label>
    <label class="primary">
        <input data-select="4" type="button">Кнопка 2</label>
</div>
<select id="select">
    <option value="1">Выбор пункта 1</option>
    <option value="2">Выбор пункта 2</option>
    <option value="3">Выбор пункта 3</option>
    <option value="4">Выбор пункта 4</option>
    <option value="5">Выбор пункта 5</option>
    <option value="6" checked>Выбор пункта 6</option>
</select>

<script>
    document.querySelectorAll('.group')[0].addEventListener('click', function (e) {
        var elem = e.target;
        if (elem.hasAttribute('data-select')) {
            let select = document.querySelector('#select');
            select.value = elem.getAttribute('data-select');

            let options = document.querySelectorAll('#select option');
            
            if (select.value == 4) {
                options.forEach(el => el.disabled = false);
            }
            else options.forEach(el => el.disabled = (el.value !== select.value ? true : false));
        }
    });
</script>

[olegan4eg88]

j0hnik, нет.
В Вашем примере если нажать "Кнопка 2" первой, то не блокирует функции. А если нажать "Кнопка 1" сразу то "Кнопка 2" не работает.

[olegan4eg88]

MC-XOBAHCK спасибо Вам это верное решение !

[olegan4eg88]

MC-XOBAHCK, а у можно сделать с использованием строки

Array.from(options, (option, i) => options[i].disabled = (option.value !== select.value ? true : false));

, а дальше добавить проверку, что если select.value === "4" то не блокировать.
Так как у меня за option привязано действие, но в Вашем решении если я нажимаю "Кнопка 1" то в select выбирается нужный option, но применяется он только после следующего действия к в данном случае нажатии "Кнопка 2"

Почему прошу сделать с применением той строки, потмоу что там option выбирается и применяется действие заложенное в нем.

[j0hnik]

olegan4eg88,
а так?

<div class="group">
    <label class="primary">
        <input data-select="3" type="button">Кнопка 1</label>
    <label class="primary">
        <input data-select="4" type="button">Кнопка 2</label>
</div>
<select id="select">
    <option value="1">Выбор пункта 1</option>
    <option value="2">Выбор пункта 2</option>
    <option value="3">Выбор пункта 3</option>
    <option value="4">Выбор пункта 4</option>
    <option value="5">Выбор пункта 5</option>
    <option value="6" checked>Выбор пункта 6</option>
</select>

<script>
    document.querySelectorAll('.group')[0].addEventListener('click', function (e) {
        var elem = e.target;
        if (elem.hasAttribute('data-select')) {
            let select = document.querySelector('#select');
            select.value = elem.getAttribute('data-select');

            let options = document.querySelectorAll('#select option');
            
            if (select.value == 4) {
                options.forEach(el => el.disabled = false);
            }
            else options.forEach(el => el.disabled = (el.value !== select.value ? true : false));
        }
      select.dispatchEvent(new Event('change'));
    });
</script>

[olegan4eg88]

j0hnik вот теперь применяется всё как нужно, спасибо