Consider the following code for disabling/enabling a submit button:
var orderText = $('#order input[type="text"]');
var orderCheck = $('#order :checkbox');
var orderSelect = $('#order select').not('#sel_option_img');
var enableOrDisableSubmit = function() {
var textEntered = orderText.val().length > 0;
var orderChecked = orderCheck.not('.others').is(':checked');
var orderSelected = $(orderSelect).val() != '';
if (textEntered || orderChecked || orderSelected)
$('#submit').prop('disabled', false);
else
$('#submit').prop('disabled', true);
};
orderText.change(enableOrDisableSubmit);
orderCheck.change(enableOrDisableSubmit);
orderSelect.change(enableOrDisableSubmit);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form id="order"><select><option value="">--please select--</option><option value="12">option1</option><option value="13">option2</option></select> <br><br><select><option value="">--please select--</option><option value="12">option1</option><option value="13">option2</option></select> <br><br><select><option value="">--please select--</option><option value="12">option1</option><option value="13">option2</option></select> <br><br><select class="second"><option value="">--please select--</option><option value="12">option1</option><option value="13">option2</option></select> <br><br><input type="text" value=""><br><br><input type="text" value=""><br><br><input type="text" value=""><br><br><input type="text" value=""><br><br><input type="checkbox" value="somevalue"><input type="checkbox" value="somevalue"><input type="checkbox" value="somevalue"><br><input type="submit" value="submit" name="submit" id="submit" disabled></form>
The code only works for the first child of each element (input and select elements), but not on the second, third, fourth, etc, except for the checkboxes which are working properly.
Any hint to write the code in a correct way?