javascript - How can I dynamically update materialize <select>?

Question

I have a select tag with several options. I am using materizlizecss select, and I would like to use javascript to disable certain options based on certain conditions. I have read another post on how to do this, but I need to do it without jquery. When I try it, nothing happens. No errors or warnings in the console either.

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

Answer 1

You have to Re-Initialize a select field after edited it

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>