Is there a way to use Material Design css and jquery to disable the next button until a value is selected from a drop down list?
<div class="mdl-selectfield mdl-js-selectfield">
<select class="mdl-selectfield__select" id="ad_duration">
<option value=""></option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
<option value="option4">option 4</option>
<option value="option5">option 5</option>
</select>
</div>
<br><br><br>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="submitorder">
Next
</button>
$('#submitorder').attr('disabled', 'disabled');
$('#ad_duration').change(updateFormEnabled);
function updateFormEnabled() {
if (verifyAdSettings()) {
$('#submitorder').attr('disabled', '');
} else {
$('#submitorder').attr('disabled', 'disabled');
}
}
function verifyAdSettings() {
if ($('#ad_duration').val() != '') {
return true;
} else {
return false
}
}
This solution worked perfectly fine even without the mdl-selectfield. https://codepen.io/inouekun/pen/XeLyaY