如果輸入字段爲空，禁用提交按鈕

乍一看，它看起來一切正常，但如果用戶鍵入一些文本，然後刪除它，提交按鈕變爲啓用。

這裏是我的代碼：

$(document).ready(function(){ 
    $('.sendButton').attr('disabled',true); 
    $('#message').keyup(function(){ 
     if($(this).val.length !=0){ 
      $('.sendButton').attr('disabled', false); 
     } 
    }) 
});

來源

2013-07-17 Saulius s

添加禁用它的else語句 – tymeJV

你永遠如果長度爲0 – Doorknob

什麼攻擊，禁用它？使用啓用和禁用屬性不安全....只需在瀏覽器中單擊f12，在html中找到提交按鈕，然後刪除殘疾人！即使輸入內容爲空，它也會提交表單。 – Elnaz

你只是根據document.ready禁用當DOM已準備就緒，但你需要disable在keyup事件時，也得到文本框空這個只發生一次。也改變$(this).val.length到$(this).val().length

$(document).ready(function(){ 
    $('.sendButton').attr('disabled',true); 
    $('#message').keyup(function(){ 
     if($(this).val().length !=0) 
      $('.sendButton').attr('disabled', false);    
     else 
      $('.sendButton').attr('disabled',true); 
    }) 
});

或者你可以使用條件運算符代替if語句。還使用丙代替ATTR作爲屬性不recommended by jQuery 1.6和上述用於禁用，檢查等

在jQuery 1.6的，所述.attr（）方法返回未定義對於尚未被設置的屬性。檢索和修改DOM性能如所檢查的，所選擇的，或禁用形式元素的狀態，使用 .prop()方法，jQuery docs

$(document).ready(function(){ 
    $('.sendButton').prop('disabled',true); 
    $('#message').keyup(function(){ 
     $('.sendButton').prop('disabled', this.value == "" ? true : false);  
    }) 
});

來源

2013-07-17 11:54:21 Adil

謝謝@Zenith，很好的觀察 – Adil

謝謝@Adil –

這一個解決了 –

嘗試此代碼

$(document).ready(function(){ 
    $('.sendButton').attr('disabled',true); 

    $('#message').keyup(function(){ 
     if($(this).val().length !=0){ 
      $('.sendButton').attr('disabled', false); 
     } 
     else 
     { 
      $('.sendButton').attr('disabled', true);   
     } 
    }) 
});

檢查demo Fiddle

您缺少if語句的其他部分（如果textbox爲emp，則再次禁用該按鈕TY）和括號中if($(this).val.length !=0){

來源

2013-07-17 11:59:05 Nalaka526

()後val功能，請試試這個

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Jquery</title> 
    <meta charset="utf-8">  
    <script src='http://code.jquery.com/jquery-1.7.1.min.js'></script> 
    </head> 

    <body> 

    <input type="text" id="message" value="" /> 
    <input type="button" id="sendButton" value="Send"> 

    <script> 
    $(document).ready(function(){ 

     var checkField; 

     //checking the length of the value of message and assigning to a variable(checkField) on load 
     checkField = $("input#message").val().length; 

     var enableDisableButton = function(){   
     if(checkField > 0){ 
      $('#sendButton').removeAttr("disabled"); 
     } 
     else { 
      $('#sendButton').attr("disabled","disabled"); 
     } 
     }   

     //calling enableDisableButton() function on load 
     enableDisableButton();    

     $('input#message').keyup(function(){ 
     //checking the length of the value of message and assigning to the variable(checkField) on keyup 
     checkField = $("input#message").val().length; 
     //calling enableDisableButton() function on keyup 
     enableDisableButton(); 
     }); 
    }); 
    </script> 
    </body> 
</html>

來源

2013-07-17 12:43:10 Akbar

一個簡單的方法：

function toggleButton(ref,bttnID){ 
    document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true); 
} 


<input ... onkeyup="toggleButton(this,'bttnsubmit');"> 
<input ... disabled='disabled' id='bttnsubmit' ... >

來源

2014-02-18 15:54:20

對於那些使用的CoffeeScript，我已經把我們全球使用的代碼禁用我們使用最廣泛的表單上的提交按鈕。上面Adil的答案的適應。

$('#new_post button').prop 'disabled', true 
$('#new_post #post_message').keyup -> 
    $('#new_post button').prop 'disabled', if @value == '' then true else false 
    return

來源

2016-11-28 15:08:14 jkras

如果輸入字段爲空，禁用提交按鈕

回答

相關問題