For a project I'm working on, I have implemented two Select elements in the HTML code.
The second select should only be enabled when the first select meets certain conditions.
You can check out the JSfiddle link for reference.
$(document).ready(function() {
$('select').material_select();
$("select[name=type]").change(function() {
alert("hello");
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 functioning perfectly.
Any assistance would be greatly appreciated.
Please feel free to check out the Jsfiddle code. :)