如果聚焦输入为空，则JQUERY禁用下一个所有输入

Question

如果当前输入为空，我试图禁用下一个所有输入。 假设用户在填写完所有详细信息后回来并假设删除状态输入，那么它应该禁用下一个所有输入。

我的HTML代码段：

<form action="#" class="shippingForm" id="ShippingForm" method="post" name="shippingForm">
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="form__block full-width form-select">
          <label class="form__label">Country <sup>*</sup></label>
          <input id="shippingAddressCountry" name="shippingAddressCountry" type="hidden">
          <div class="typeahead__container">
            <div class="typeahead__field">
              <span class="typeahead__query"><input autocomplete="off" class="js-typeahead-country_v1 form__input full-width step" name="country_v1[query]" placeholder="Country" type="search"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="form__block full-width form-select">
          <label class="form__label">State <sup>*</sup></label>
          <input id="shippingAddressState" name="shippingAddressState" type="hidden">
          <div class="typeahead__container">
            <div class="typeahead__field">
              <span class="typeahead__query"><input autocomplete="off" class="js-typeahead-state_v1 form__input full-width step" disabled name="state_v1[query]" placeholder="State" type="search"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="form__block full-width form-select">
          <label class="form__label">City<sup>*</sup></label>
          <input class="form__input full-width" id="shippingCity" name="shippingCity" type="hidden">
          <div class="typeahead__container">
            <div class="typeahead__field">
              <span class="typeahead__query"><input autocomplete="off" class="js-typeahead-city_v1 form__input full-width step" disabled name="city_v1[query]" placeholder="Search" type="search"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="form__block full-width form-select">
          <label class="form__label">Address<sup>*</sup></label>
          <input class="form__input full-width" id="shippingAddress1" name="shippingAddress1" type="hidden">
          <div class="typeahead__container">
            <div class="typeahead__field">
              <span class="typeahead__query"><input autocomplete="off" class="js-typeahead-address_v1 form__input full-width step" disabled name="address_v1[query]" placeholder="Search" type="search"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="form__block full-width form-select">
          <label class="form__label">Zip<sup>*</sup></label>
          <input class="form__input full-width" id="shippingPostalCode" name="shippingPostalCode" type="hidden">
          <div class="typeahead__container">
            <div class="typeahead__field">
              <span class="typeahead__query"><input autocomplete="off" class="js-typeahead-zip_v1 form__input full-width step" disabled name="zip_v1[query]" placeholder="Search" type="search"></span>
            </div>
          </div>
        </div>
      </div>
    </form>

Jquery的

(function() {
  $('.step').keyup(function() {
    var mystep = $('.step');
    var nextstep = mystep.eq(mystep.index(this) + 1);
    var next_step = $(this).next('.step');
    var all_next_steps = $(this).nextAll('.step');
    // If the element *has* a value
    if ($(this).val()) {
      nextstep.attr('disabled', false);
    }
    // If the element doesn't have a value
    else {
      // Clear the value of all next steps and disable
      all_next_steps.val('');
      all_next_steps.attr('disabled', true);
    }
  });

  $(input).change(function() {
    if ($(this).val().length == '') {
      $(this).nextAll('.step').val('');
      $(this).nextAll('.step').attr('disabled', true);
    }
  })
})()

Fiddle