【求助】如何先使按钮失效，判断input输入内容有效后，再使按钮生效

参考网上和书上的代码，自己写了一个，如下：

html文件：

<form action="" method="POST">
  <div id="aaa">
  <label>content</label><input class="required" type="text"><span class="mark">*</span>
  </div>
<div id="btn">
Next
</div>
</form>

css文件：

#btn    {
  width: 50px;
  padding: 1px;
  background-color: #BFBFBF;
  border: 3px solid;
  text-align: center;
  color: #555;
  }

.mark    {
color: red;
}

.warning    {
background-color: red;
color: #fff;
}

.error-message    {
margin-left: 10px;
color: #fff;
font-weight: bold;
}

.valid    {
background-color: blue;
}

js文件：

$(document).ready(function()    {
$('input').blur(function() {
    $(this).parents('#aaa').removeClass('warning').find('.error-message').remove();
    $('div#btn').addClass('valid');

      if ($(this).is('.required')) {
      var $listItem = $(this).parents('#aaa');
      if (this.value == '') {
        var errorMessage = 'This is a required field';
        $('<span></span>').addClass('error-message').text(errorMessage).appendTo($listItem);
        $listItem.addClass('warning');
      };
      };
  });
});

其他的都没有什么问题，就是对在输入内容后为按钮添加一个新类的操作不行，按钮的状态始终没有变化，不知道是什么原因？请大家多多指点！！

又测试了一下，发现其实设置已经执行了，但是由于原来的#id设置了背景色，所以，再次设置背景色的时候没有显示出来，还是显示原来的效果，如果将原来#id的背景色设置为白色，就看出效果来了，这是什么问题呢？该如何解决呢？
谢谢！！

自己又试了一下，已经可以实现了……

使用了removeAttr()，先移除，再添加，但是要先引入一个类……

觉得这个方法比较笨，不知道是否还有更好的方法，还请大家多多指点！！

谢谢！！

没有笨办法，只有有效的办法。
在当前阶段，能尽自己所能实现效果是最好的状态~
如果一定要设置背景色，先用一个和warning同等级的class设置就行了。也就是所说的加一个类。
这样通过addClass和removeClass就能实现了。