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

问题描述：

如果当前输入为空，我试图禁用下一个所有输入。假设用户在填写完所有细节后回来并假定删除状态输入，则应该禁用下一个所有输入。如果焦点输入为空，JQUERY会禁用下一个所有输入

我的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

答

您的旁边电流输入级元件

但在您的标记不存在，你正在寻找的方法步骤的检查，这是一个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>

希望这有助于

答

请检查这下面的链接可能是你想要achive这样的事情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); 
} 
});

}）（）

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

相关推荐