CODEWITHSUNDEEP
jquerybuttonkeyup
user4991434
user4991434

Reputation:

Button disabled doesnt work if you dont text on textarea

Guys I am trying to make a to-do-list.

If there is nothing on textarea button is disabled. If you start to type, button is not disabled. Okay this works on my code but after adding a list, button is not disabled. But if I type and delete my text on textarea button is disabled and if I type, button is not disabled. What I want is, after clicking the button (after adding a list), button must be disabled till I type. here fiddle

$(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>

Upvotes: 1

Views: 38

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

use this line in button click event

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

Working demo

Upvotes: 2

Related Questions