2017-08-01 79 views
-1

我需要禁用按钮时没有值插入输入文本没有价值禁用按钮时,在输入文本

<form> 
    <div class="form-group">    
     <p class="description">Please Enter Your Tracking Number.</p> 

     <input type="text" id="tracking-input" class="input-text full-width" placeholder="Enter your Tracking number(s)"onkeypress='return event.charCode >= 48 && event.charCode <= 57'> 
    </div> 
    <br> 
    <button type="submit" id="register" class="full-width btn-medium">Track</button> 
</form> 

有没有试过,但不起作用

<script> 

function buttonState(){ 
    $("input").each(function(){ 
     $('#register').attr('disabled', 'disabled'); 
      if($(this).val() == "") return false; 
     $('#register').attr('disabled', ''); 
    }) 
} 

$(function(){ 
    $('#register').attr('disabled', 'disabled'); 
    $('input').change(buttonState); 
}) 

</script> 
+0

按钮财产也许这将帮助https://stackoverflow.com/questions/7067005/disable-button-whenever-a-text-field-is-空动态 – usrNotFound

+0

[jQuery禁用/启用提交按钮]的可能重复(https://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button) – sokin

+0

即时通讯使用

回答

1

您可以使用keyup事件来检查基于价值

$(document).ready(function(){ 
 
    $('#register').prop('disabled',true); 
 
    $('#tracking-input').keyup(function(){ 
 
     $('#register').prop('disabled', this.value === "");  
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="form-group"> 
 
     <p class="description">Please Enter Your Tracking Number.</p> 
 
     <input type="text" id="tracking-input" class="input-text full-width" placeholder="Enter your Tracking number(s)"onkeypress='return event.charCode >= 48 && event.charCode <= 57'> 
 
    </div> <br> 
 
    <button type="submit" id="register" class="full-width btn-medium">Track</button> 
 
</form>

+1

作品完美,非常感谢 –

+0

刚刚意识到代码只能在网络版上运行,但在手机上无法运行 –

+0

如何让此代码可以在移动设备上运行? –

0

$("#register").prop("disabled",true); 
 

 
$("#tracking-input").keyup(function(){ 
 
var valuee=$("#tracking-input").val().trim(); 
 
if(valuee==""){ 
 
$("#register").prop("disabled",true); 
 

 
}else{ 
 
$("#register").prop("disabled",false); 
 
} 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
       <div class="form-group"> 
 

 
        <p class="description">Please Enter Your Tracking Number.</p> 
 

 
        <input type="text" id="tracking-input" class="input-text full-width" placeholder="Enter your Tracking number(s)"> 
 
       </div> <br> 
 
       <button type="submit" id="register" class="full-width btn-medium">Track</button> 
 
      </form>