<div class="innercontent innercontent-a">
<div class="wrap-usermobile">
<label class="user-info">账 户</label>
<input type="tel" name="mobile" maxlength="11" value="" >
</div>
<div class="submit-btn">
<button type="button" class="btn-stepa" >下一步</button>
</div>
</div>
<div class="innercontent innercontent-b" >
<div class="wrap-codep">
<label class="user-info">验证码</label>
<input type="text" name="codep" >
</div>
<div class="submit-btn">
<button type="button" class="btn-stepb">下一步</button>
</div>
</div>
$("input[name='mobile']").on('input propertychange',function(){
var mobile = $(this).val();
if(mobile!=""){
$(".btn-stepa").removeAttr("disabled").css('background','#6f60cf');
}
else{
$(".btn-stepa").attr('disabled',"disabled").css('background','#a396f7');
}
});
$("input[name='codep']").on('input propertychange',function(){
var codep = $(this).val();
if(codep!=""){
$(".btn-stepb").removeAttr("disabled").css('background','#6f60cf');
}
else{
$(".btn-stepb").attr('disabled',"disabled").css('background','#a396f7');
}
});
本人新手,请不要给负分哦~
$("input[name='mobile'], input[name='codep']").on('input propertychange',function(){
var $this = $(this),
val = $this.val(),
$btn = $this.parents('.innercontent').find('button');
if(val!=""){
$btn.removeAttr("disabled").css('background','#6f60cf');
}
else{
$btn.attr('disabled',"disabled").css('background','#a396f7');
}
});
多看文档。
最好把事件委托给document 这样在input后续插入时依然有效
大概可以修改成这样吧!试试看
$(document).on('input propertychange', "input[name='mobile'], input[name='codep]", function (e) {
if($(this).attr('name') == 'moble'){
var mobile = $(this).val();
if(mobile!=""){
$(".btn-stepa").removeAttr("disabled").css('background','#6f60cf');
} else {
$(".btn-stepa").attr('disabled',"disabled").css('background','#a396f7');
}
} else {
var codep = $(this).val();
if(codep!=""){
$(".btn-stepb").removeAttr("disabled").css('background','#6f60cf');
} else {
$(".btn-stepb").attr('disabled',"disabled").css('background','#a396f7');
}
}
})
$("input[name='mobile'],input[name='codep']").on('input propertychange',function(){
var $this = $(this),
val = $this.val(),
$btn = $this.closest(".innercontent").find("button"); //这里的button标签最好有个类名来限制一下,比如button.btn-step,不然如果有多个button标签就会有问题。
if(val!=""){
$btn.prop('disabled',false).css('background','#6f60cf');
}else{
$btn.prop('disabled',true).css('background','#a396f7');
}
});
attr和prop的用法是不同的,你可以看看jquery的官方文档有解释英文版,这是中文版。
关于你在答案一种的评论,你的这个.btn-stepa和.btn-stepb是可以优化的,前提是你让我看一下你的html结构。
这样试试
$("input[name='mobile'],input[name='codep']").on('input propertychange',function(){
var v = $(this).val(), _v = $(this).attr('name');
var _class = (_v == 'mobile')?$('.btn-stepa'):$('.btn-stepb');
if(v!=""){
_class.removeAttr("disabled").css('background','#6f60cf');
}else{
_class.attr('disabled',"disabled").css('background','#a396f7');
}
});