У меня есть тег выбора с несколькими вариантами. Я использую materizlizecss select, и я хотел бы использовать javascript для отключения определенных параметров в зависимости от определенных условий. Я прочитал еще один пост о том, как это сделать, но мне нужно сделать это без jquery. Когда пробую, ничего не происходит. Ошибок и предупреждений в консоли тоже нет.

<form id="code-form">
            <h4 style="color: black;">Generate Code</h4>
            <div class="input-field">
                <select name="security-select" id="security-select">
                  <option style="display: none;" id="webmaster-value" value="1">Webmaster</option>
                  <option id="scoutmaster-value" value="2">Scoutmaster</option>
                  <option id="general-admin-value" value="3">General Admin</option>
                  <option id="spl-value" value="4">Senior Patrol Leader</option>
                  <option selected id="standard-user-value" value="5">Standard User</option>  
                </select>
            </div>
            <button class="btn deep-purple" id="add-code">Generate Code</button>
        </form>

.

 if (security == '2') {
        document.querySelector('#webmaster-value').setAttribute('disabled', 'disabled')
    }
-1
Ray Beard 11 Фев 2021 в 21:42

1 ответ

Лучший ответ

Вы должны повторно инициализировать поле выбора после его редактирования

document.addEventListener('DOMContentLoaded', function () {
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems);
});

document.getElementById("change-code").addEventListener("click", function () {
  document.querySelector('#webmaster-value').setAttribute('disabled', 'disabled');
  // Re-Initialize select
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<form id="code-form">
    <h4 style="color: black;">Generate Code</h4>
    <div class="input-field">
        <select name="security-select" id="security-select">
            <option style="display: none;" id="webmaster-value" value="1">Webmaster</option>
            <option id="scoutmaster-value" value="2">Scoutmaster</option>
            <option id="general-admin-value" value="3">General Admin</option>
            <option id="spl-value" value="4">Senior Patrol Leader</option>
            <option selected id="standard-user-value" value="5">Standard User</option>
        </select>
    </div>
    <button type="button" class="btn deep-purple" id="change-code">Press to disable</button>
</form>
0
Doan Van Thang 11 Фев 2021 в 21:33