Toggle disabled property on materialize dropdown selection?

Question

I want to default a select in materialize as disabled.

<form>
 <select id="mySelect" required disabled>
  <option>Cats</option>
  <option>Dogs</option>
 </select>
</form>

<button id="try" >Try it</button>

Jquery:

$('#try').click(function(){
 $('#mySelect').prop("disabled", false);
};

In the dev tools it shows that the disabled property is removed on the select when the try button is clicked. However, the dropdown will not work. I believe this is something specific to materialize because it seems to dynamically generate a styled unordered list above my select. It adds the disabled to this newly generated list, which I removed as well.

Answer 1

To get the select to work with Materializecss , you must add the following js line to your script :

$(document).ready(function() {
   $('select').material_select();
});

And to make sure it works after enabling the select edit your js function as follow :

 $('#try').click(function(){
   $('#mySelect').prop("disabled", false);
   $('select').material_select();
});

Answer 2

To update the select, you need to re-initialize

$('#try').click(function(){
    $('#mySelect').prop("disabled", false);
    var elems = document.querySelectorAll('#mySelect');
    var instances = M.FormSelect.init(elems);
};