禁用按鈕只能第一次工作，當我刷新頁面

Question

我使用下面的代碼來禁用按鈕，如果我的textarea是空的，但它只有第一次工作，當我刷新整個頁面後，採取第一次輸入我清除textarea的，但按鈕不會禁用... 什麼是錯在我的代碼請幫助...

HTML代碼

<div id='box'> 
       <form id="stat"> 
        <textarea type="text" name="status" id="status" placeholder="Anything You Want To Say...?"></textarea> 
       </form>  
       <button id='statbtn' type="submit" onclick="update()">Update</button> 
      </div> 

我使用此代碼顯示的狀態和刷新我的textarea與

function update() { 
     var x,y; 
     x=document.getElementById("stat"); 
     y=x.elements["status"].value; 
     document.getElementById("bigbox").innerHTML += "<div id='box1'>"+ y + "</div>"; 
     $('#status').val(''); 
    } 

使用此代碼禁用按鈕

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

}）;

我對js的刷新行表示懷疑，所以我使用jquery代碼，但也沒有在隨後的所有時間禁用按鈕。

Answer 1

我認爲，像下面的代碼片段做了你在找什麼。我使用普通的JavaScript。顯然，你可以使用jQuery來做同樣的事情。但是，請記住，一個好的做法是僅使用它們來做同樣的事情。我的意思是使用普通的JavaScript - document.getElementById和其他相應的文檔方法 - 更好地抓住你的元素，而不是爲它們中的一半使用普通的JavaScript和其餘的jQuery。

// We grab the elements of our UI. 
 
var btn = document.getElementById('statbtn'); 
 
var stat = document.getElementById("status"); 
 
var bigBox = document.getElementById("bigbox") 
 

 
// The function that is called on statbtn click event. 
 
function update() { 
 
    var status = stat.value; 
 
    bigBox.innerHTML += "<div id='box1'>"+ status + "</div>"; 
 
    stat.value = ''; 
 
    btn.setAttribute('disabled','disabled'); 
 
} 
 

 
// Register the event listeners. 
 
document.addEventListener('DOMContentLoaded', function(){ 
 
    btn.setAttribute('disabled','disabled'); 
 
}); 
 

 
btn.addEventListener('click', function(){ 
 
    update(); 
 
}); 
 

 
stat.addEventListener('keyup', function(){ 
 
    var btn = document.getElementById('statbtn'); 
 
    if(this.value){ 
 
     btn.removeAttribute('disabled',''); 
 
    } else { 
 
     btn.setAttribute('disabled','disabled'); 
 
    } 
 
});

<div id='box'> 
 
    <form id="stat"> 
 
     <textarea type="text" name="status" id="status" placeholder="Anything You Want To Say...?"></textarea> 
 
    </form>  
 
    <button id='statbtn' type="submit">Update</button> 
 
</div> 
 
<div id='bigbox'> 
 
</div>

Answer 2

這將工作：

$(document).ready(function(){ 
    $('#statbtn').prop('disabled',true); 
    // textarea is the id of your textbox. 
    $('#textarea').change(function(){ 
     if($('#textarea').val() == ""){ 
     $('#statbtn').prop('disabled',true); 
     }else{ 
     $('#statbtn').prop('disabled',false); 
     } 
    }) 
})