如果您不在文本区域发送文本，禁用的按钮将不起作用

Question

伙计们，我正在努力列出待办事项。

如果文本区域上没有任何内容，按钮将被禁用。若您开始键入，按钮不会被禁用。好的，这对我的代码有效，但添加列表后，按钮并没有被禁用。但若我在文本区键入并删除我的文本，按钮会被禁用，若我键入，按钮不会被禁用。我想要的是，在点击按钮后（添加列表后），按钮必须被禁用，直到我键入为止。这里小提琴

$(function() {
  $('#textarea').val('');
  
  $('#button').attr("disabled", true);
  $('#button').css('background', 'red');
  $('#textarea').keyup(function(e) {
    var keyed = $(this).val();
    if ($(this).val() == 0) {
      $('#button').css('background', 'red');
      $('#button').attr("disabled", true);
    } else {
      $('#button').css('background', '#333');
      $('#button').attr("disabled", false);
    }
   
$('#button').click(function() {
    var userList = $('#textarea').val();
    $('#textarea').val('');
    $('#list-area').append("<br/>" + userList);
  }); 
  
  });
});

#todolist {
  width: 300px;
  height: 200px;
  margin: 10px auto;
  border: 1px solid red;
}
#center {
  text-align: Center;
  margin-top:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="todolist">
  <div id="center">
  <textarea rows="1" id="textarea"></textarea>
    <button id="button">Add</button>
  </div>
  <div id="list-area">
  
  </div>
</div>

Answer 1

在按钮点击事件中使用此行

$(this).css('background', 'red').prop("disabled", true);

工作演示