JSFiddle - React, Tailwind, and code Playground
HTML
<form action="#" method="post" id="adminForm" name="adminForm" class="form-auto m-0 cb_form cbValidation" novalidate="novalidate">
<input type="hidden" name="listid" value="6">
<input type="hidden" name="limitstart" value="0">
<input type="hidden" name="search" value>
<select id="cb_degree" class="cb_select" required>
<option value="" selected>No preference</option>
<option value="chem" class="search-btn" data-search="chemistry">chemistry</option>
<option value="phys" class="search-btn" data-search="physics">physics</option>
<option value="math" class="search-btn" data-search="mathematics">mathematics</option>
</select>
<select id="cb_country" class="cb_select" required>
<option value="" selected>No preference</option>
<option value="us" class="search-btn" data-search="USA">USA</option>
<option value="fr" class="search-btn" data-search="France">France</option>
<option value="ge" class="search-btn" data-search="Germany">Germany</option>
</select>
<select id="cb_state" class="cb_select" required>
<option value="" selected>No preference</option>
<option value="ny" class="search-btn" data-search="New York">New York</option>
<option value="par" class="search-btn" data-search="Paris">Paris</option>
<option value="frank" class="search-btn" data-search="Frankfurt">Frankfurt</option>
</select>
<select id="cb_religion" class="cb_select" required>
<option value="" selected>No preference</option>
<option value="chr" class="search-btn" data-search="Christianity">Christianity</option>
<option value="hin" class="search-btn" data-search="Hinduism">Hinduism</option>
<option value="bud" class="search-btn" data-search="Buddishm">Buddishm</option>
</select>
<input type="submit" id="submit" value="Find Users" class="cbUserlistSubmit" disabled="disabled" />
</form>
<div id="test">
</div>
CSS
* { box-sizing: border-box; }
input {
display: block;
width: 100%;
padding: 14px 16px;
border-top: 0;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #fff;
}
input[type="submit"] {
width: 100%;
padding: 14px 16px;
background: #5cb85c;
color: #fff;
border: 0;
border-radius: 0;
margin-bottom: 20px;
transition: background 600ms;
margin-top: 10px;
cursor: pointer;
}
input[type="submit"]:disabled {
background: #555;
cursor: not-allowed;
}
JavaScript
(function() {
if ($('input[name=listid]').val() === '6') {
$('#adminForm').on("change keyup", function(event) {
var empty = false;
$('#adminForm > select').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('.cbUserlistSubmit').attr('disabled', 'disabled');
} else {
$('.cbUserlistSubmit').removeAttr('disabled');
}
})
};
})();