javascript - jQuery 禁用启用按钮样式

Question

我正在尝试使用 jquery 制作禁用启用按钮样式。

这是我的 DEMO来自 Codepen 的页面

在我的演示中，您可以看到有一个蓝色的提交按钮。当您在输入字段中输入内容时，按钮处于事件状态。

我想在这个按钮禁用颜色为红色时添加。如果按钮不可禁用，则按钮颜色变为蓝色。

我已经为按钮创建了 .enableOnInput 和 .red Css 样式。

.enableOnInput {
  width: 200px;
    height: 25px;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    color: rgba(255,255,255,1);
    font: bold 10px/25px "Lucida Grande";
    border: 1px solid rgba(0,153,224,1);
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    background-image: rgba(66,66,66,1);
    background-image: -webkit-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
    background-image: -moz-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
    background-image: -o-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
    background-image: -ms-linear-gradient(top, #3db5ed 0%,#0099e0 100%);
    background-image: linear-gradient(top, #3db5ed 0%,#0099e0 100%);
}
.red {
    width: 20px;
    height: 25px;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    color: rgba(255,255,255,1);
    font: bold 10px/25px "Lucida Grande";
    border: 1px solid rgba(0,153,224,1);
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    background-image: rgba(66,66,66,1);
    background-image: -webkit-linear-gradient(top, #ff0000 0%,#c20202 100%);
    background-image: -moz-linear-gradient(top, #ff0000 0%,#c20202 100%);
    background-image: -o-linear-gradient(top, #ff0000 0%,#c20202 100%);
    background-image: -ms-linear-gradient(top, #ff0000 0%,#c20202 100%);
    background-image: linear-gradient(top, #ff0000 0%,#c20202 100%);
}

这是我用于禁用启用的 jquery:

$(function(){
     $('#searchInput, #searchInput2').keyup(function(){
          if ($(this).val() == '') { //Check to see if there is any text entered
               //If there is no text within the input ten disable the button
               $('.enableOnInput').attr('disabled', 'true');
               $(".aa").show();
               $(".bb").hide();
          } else {
               //If there is text in the input, then enable the button
               $('.enableOnInput').attr('disabled', false);
               $(".aa").hide();
               $(".bb").show();
          }
     });
});

Answer 1

添加这个CSS规则:

input:disabled
{
  background-color: red;
  /*other style properties*/
}