JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<form action="" method="POST" id="postForm">
<div class="row">
<div class="col-md-9 register-right">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading">Register</h3>
<div class="row register-form">
<div class="col-md-12">
<div class="form-group">
<select class="form-control" name="buy" id="buyoption">
<option class="hidden" selected disabled value="">Please select what you want</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div><label for="buy"><b>YOU </b></label>
<div class="form-group">
<select class="form-control" name="sell" id="selloption">
<option class="hidden" selected disabled value="">Please select what you to</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div><input type="submit" class="btnRegister" id="btnProceed" value="NEXT" /> </div>
</div>
</div>
</div>
</div>
</div>
</form>
</html>
JavaScript
$(document).ready(function() {
$('#btnProceed').attr('disabled', 'disabled');
function updateFormEnabled() {
if (verifyAdSettings()) {
alert('good to go');
$('#btnProceed').removeAttr('disabled');
} else {
$('#btnProceed').attr('disabled', 'disabled');
}
}
function verifyAdSettings() {
if ($('#buyoption').val() != null && $('#selloption').val() != null) {
return true;
} else {
return false
}
}
$('#buyoption').change(updateFormEnabled);
$('#selloption').change(updateFormEnabled);
});