フォーカスされた入力が空の場合、次のすべての入力を無効にします。

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

Answer 1

あなたのチェックは、それがDIV内およびその中に存在し、ステップ要素は

はそうあなたが

チェックこの

(function() { 
 
    $('.step').keyup(function() { 
 
    var mystep = $('.step'); 
 
    var nextstep = mystep.eq(mystep.index(this) + 1); 
 
    var next_step = $(this).parents('.col-sm-6').next().find('.step'); 
 
    var all_next_steps = $(this).parents('.col-sm-6').nextAll().find('.step'); 
 
    // alert(all_next_steps.length); 
 
    // 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() == '') { 
 

 
     //$($0).parents('.col-sm-6').nextAll().find('.step').attr('disabled',true) 
 
     $(this).parents('.col-sm-6').nextAll().find('.step').attr('disabled', true).val(''); 
 

 
    } 
 
    }) 
 
})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

次のコードにコードを変更する必要があります

が、これは

を役に立てば幸い

Answer 2

この次のリンクをご確認ください、あなたはこのhttp://jsfiddle.net/qKG5F/2882

(function() { 

var a = $('.step'); 
a.attr('disabled',true); 
a.eq(0).attr('disabled',false); 

$('.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 ($(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); 
} 
}); 

ようachive何かをしたいかもしれません

}）（）次のマークアップでは、それはあなたが探している方法は存在しません

が、現在の入力ステップ要素へのステップのための