Question

我正在尝试使用jquery创建一个禁用启用按钮样式。

这是Codepen的DEMO页面

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

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

我为按钮创建了.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*/
}

Answer 2

只需使用addClass/removeClass方法：

 $('#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').prop('disabled', true).addClass('red');
           $(".aa").show();
           $(".bb").hide();
      } else {
           //If there is text in the input, then enable the button
           $('.enableOnInput').prop('disabled', false).removeClass('red');
           $(".aa").hide();
           $(".bb").show();
      }
 }).keyup();

我还为keyup事件添加了trigged以检查初始状态并设置正确的类。

<强> UPD 即可。或者正如@Terry在评论中建议的那样，将CSS选择器从.red更改为.enableOnInput:disabled并使用$('.enableOnInput').prop('disabled', true)进行更好。请注意，这种方式在IE8及以下版本中无效。

演示：http://codepen.io/anon/pen/CELut?editors=001

Answer 3

将班级red添加到按钮

<input type='submit' name='submit' id='submitBtn' class='enableOnInput red' disabled='disabled' />

添加css规则

.red{
  background-color:red;
}

和你的js

$(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();
            $('#submitBtn').addClass('red');
          } else {
               //If there is text in the input, then enable the button
               $('.enableOnInput').attr('disabled', false);
               $(".aa").hide();
               $(".bb").show();
            $('#submitBtn').removeClass('red');
          }
     });
});

Updated Link

jQuery禁用启用按钮样式

3 个答案:

演示：http://codepen.io/anon/pen/CELut?editors=001