jquery не работает вместе с Materialize для опции select hide

Question

Я работаю над проектом, в котором у меня есть два варианта в html-коде.

Второй выбор должен быть включен, только если первый выбор удовлетворяет некоторому условию.

вот ссылка JSfiddle.

$(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>

Примечание: Jquery без материализации работает отлично отлично.

Любая помощь будет в порядке.

Код Jsfiddle будет прохладным. :)

Answer 1

Я получил ответ от here.

Благодаря @ahrim.

Проблема заключается в том, как материализовать работу над элементом html. Для проведения любых обновлений,

1. Необходимо уничтожить Mr.Materialize. $('#mySelectID').material_select('destroy');
2. Выполняйте свою работу с jQuery (или любым другим JS)
3. Повторно прикрепите Mr.Materialize. - $('#mySelectID').material_select();