Auto Tab to the next input field when 1 character is filled with an input field disabled

Question

Hello friends I want to do Auto tab to next input field when fill 4 characters but 1 character and if there is a disabled input field that passes to the next enabled

How are you these questions? Auto tab to next input field when fill 4 characters

<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled"  />
<input class="inputs" type="text" maxlength="1" />



$(".inputs").keyup(function () {
   if (this.value.length == this.maxLength) {
     $(this).next('.inputs').focus();
   }
});

Answer 1

Use nextAll() method(next() method can't use since it only selects immediate adjucent sibling) with :enabled(to get only enabled inputs) and :first(to get first or nearest one among them) pseudo-class selectors.

$(".inputs").keyup(function () {
   if (this.value.length == this.maxLength) {
     $(this).nextAll('.inputs:enabled:first').focus();
   }
});

$(".inputs").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).nextAll('.inputs:enabled:first').focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />