снятие заблокированных option в select
Народ помогите добавить условие, чтоб при нажатии "Кнопка 2", не блокировался список select. Но "Кнопка 2" работала в прежнем режиме.
Код:
|
Ну так удалите из скрипта 10 строку:
Array.from(options, (option, i) => options[i].disabled = (option.value !== select.value ? true : false)); Кнопки будут работать, пункты в селекте блокироваться не будут. |
Извините я ошибся в описании цели.
При нажатии "Кнопка 2", не блокировался список select. Но "Кнопка 1" работала в прежнем режиме. |
<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> так? |
Вот так?
<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> |
j0hnik, нет.
В Вашем примере если нажать "Кнопка 2" первой, то не блокирует функции. А если нажать "Кнопка 1" сразу то "Кнопка 2" не работает. |
MC-XOBAHCK спасибо Вам это верное решение !
|
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 выбирается и применяется действие заложенное в нем. |
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> |
j0hnik вот теперь применяется всё как нужно, спасибо
|
Часовой пояс GMT +3, время: 17:07. |