jquery is not working along with Materialize for select option hiding

Question

I have been working on a project in which I have two Selects in html code.

The second select should be enable only when the first select satisfies some condition.

here is the JSfiddle link.

$(document).ready(function() {
      $('select').material_select();
      $("select[name=type]").change(function() {
        alert("hola");
        if (this.value == "1") {
          <!-- $("select[name=Effect]").material_select("destroy"); -->
          $("select[name=Effect]").prop("disabled", false);
          <!-- $("select[name=Effect]").material_select(); -->
        } else {
          <!-- $("select[name=Effect]").material_select("destroy"); -->
          $("select[name=Effect]").prop("disabled", true);
          <!-- $("select[name=Effect]").material_select(); -->
        }

      });

<div class="input-field col sm2">
  <select name="type">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
  </select>
  <label>Type</label>
</div>

<div class="input-field col sm2">
  <select name="Effect" disabled>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">AA</option>
    <option value="2">BB</option>
    <option value="3">CC</option>
  </select>
  <label>Effect</label>
</div>

Note : Jquery without materialize is working fine perfectly.

Any kind of help would be fine.

Jsfiddle code would be cool. :)

Answer 1

I got the answer from here.

Thanks to @ahrim.

The problem is the way materialize work on the html element. In order to do any update,

1. You must destroy the Mr.Materialize. $('#mySelectID').material_select('destroy');
2. Do your work with jquery (or whatever JS)
3. Re-attach the Mr.Materialize. - $('#mySelectID').material_select();