Enable submit button if atleast one field has filled value / or a selected dropdown

I have a <select> tag along with <input>, as below, but it doesn't work.

How can I enable the submit button if at least one field has a value or a selected option? How can I enable the submit button on multiple (and/& in general) fields selection?

Any help is appreciated!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  $('.field input,.field select').keyup(function() {
    var hasValue = $('#username,#password,#position').filter((index, input, select) => input.value.length > 0).length;

    $('.actions input').attr('disabled', hasValue ? false : 'disabled');
  });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='field'>
      <select id="position">
        <option value="">position</option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

<!-- end snippet -->

I would use input and change on the form, rather than keyup on the fields, since of course you can pick things with the mouse. I'd also use prop, not attr, to set disabled:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  $('form').on("input change", function() {
    var hasValue = $('#username,#password,#position').filter((index, input, select) => input.value.length > 0).length;

    $('.actions input').prop('disabled', !hasValue);
  });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='field'>
      <select id="position">
        <option value="">position</option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

<!-- end snippet -->

Separately, I think I'd probably use a more general selector when selecting the fields to check, and stop the check as soon as I know I need to enable the form:

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  $('form').on("input change", function() {
    var hasValue = false;
    $(this).find("input[type=text], input[type=password], select").each(function() {
      if (this.value) {
        hasValue = true;
        return false;
      }
    });
    $(this).find('.actions input').prop('disabled', !hasValue);
  });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='field'>
      <select id="position">
        <option value="">position</option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

<!-- end snippet -->

You can use the change event instead of the keyup

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  $( '.field input,.field select' ).change(function() {
   var hasValue = $('#username,#password,#position').filter((index, input, select) => input.value.length > 0).length;

    $('.actions input').attr('disabled', hasValue ? false : 'disabled');
});
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='field'>
      <select id="position">
        <option value="">position</option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

<!-- end snippet -->

You just need to use change rather than keyup

$(document).ready(function() {
  $('.field input,.field select').change(function() {
    var hasValue = $('#username,#password,#position').filter((index, input ,select) => input.value.length > 0).length;

    $('.actions input').attr('disabled', hasValue ? false : 'disabled');
  });
});