function only works on first child of each element

Question

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?

Answer 1

I have tested this on fiddle it works fine me on fiddle http://jsfiddle.net/AmanVirdi/7P3ab. I have changed two line in your code:

var orderText = $('#order input[type="text"]');
var orderCheck = $('#order :checkbox');
var orderSelect = $('#order select').not('#sel_option_img');

var enableOrDisableSubmit = function() {
    var textEntered = $(orderText).filter(function(){
       return $(this).val() != '';}).length > 0;  // here filter method is added for textboxes
    var orderChecked = orderCheck.not('.others').is(':checked');
    var orderSelected = $(orderSelect).filter(function(){
       return $(this).val() != '';}).length > 0;   // here filter method is added for select

    if (textEntered || orderChecked || orderSelected)
        $('#submit').prop('disabled', false);
    else
        $('#submit').prop('disabled', true);

};
orderText.change(enableOrDisableSubmit);
orderCheck.change(enableOrDisableSubmit);
orderSelect.change(enableOrDisableSubmit);

Full snippet:

var orderText = $('#order input[type="text"]');
var orderCheck = $('#order :checkbox');
var orderSelect = $('#order select').not('#sel_option_img');

var enableOrDisableSubmit = function() {
  var textEntered = $(orderText).filter(function() {
    return $(this).val() != '';
  }).length > 0; // here filter method is added for textboxes
  var orderChecked = orderCheck.not('.others').is(':checked');
  var orderSelected = $(orderSelect).filter(function() {
    return $(this).val() != '';
  }).length > 0; // here filter method is added for select

  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>