JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<input type="text" />
<input type="password" />
<input type="email" />
<input type="text" />
<input type="text" />
<textarea></textarea>
<select>
<option selected disabled hidden value=''></option>
<option>Option1</option>
<option>Option2</option>
</select>
<select>
<option selected disabled hidden value=''></option>
<option>Option1</option>
<option>Option2</option>
</select>
<select>
<option selected disabled hidden value=''></option>
<option>Option1</option>
<option>Option2</option>
</select>
<input type="submit" id="register" value="Register"/>
</form>
CSS
input, textarea, select{
display: block;
margin-top: 5px;
}
body{
padding: 15px;
}
JavaScript
$('#register').attr('disabled', 'disabled');
(function() {
$('form > input, form > textarea, form > select').change(function(){
var empty = false;
$('form > input, form > textarea, form > select').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()