jQuery 禁用启用按钮样式

Posted 2023-02-23

【中文标题】jQuery 禁用启用按钮样式

【英文标题】：jQuery disable enable button style

【发布时间】：2014-12-02 20:28:17

【问题描述】：

我正在尝试使用 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();
          
     );
);

【问题讨论】：

使用.prop() 而不是.attr()

@Anton 我知道这一点，我改变了它。我想要按钮非活动按钮颜色为 red 时。当按钮处于活动状态时，按钮颜色为蓝色。

【参考方案1】：

添加这个css规则：

input:disabled

  background-color: red;
  /*other style properties*/

【讨论】：

天哪，我想不出该怎么做。谢谢你:)

这个解决方案恕我直言是最相关的一个 - 我实际上赞成这个而不是切换无意义的类名。 red 是一个糟糕的 CSS 类选择——例如，如果你想改变禁用按钮的样式以使其不再是红色怎么办？然后类名就暴露了外观，变得与上下文无关。

为极简主义开路））

@Terry 合理的关注。类名应该是.disabled，样式声明应该是.enableOnInput:disabled, .enableOnInput.disabled 。

【参考方案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 事件以检查初始状态并设置正确的类。

UPD。或者正如@Terry 在 cmets 中建议的那样，将 CSS 选择器从 .red 更改为 .enableOnInput:disabled 并仅使用 $('.enableOnInput').prop('disabled', true) 会更好。请注意，这种方式在 IE8 及以下版本中不起作用。

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

【讨论】：

更好：替换 CSS 选择器。除了使用.red，OP 可以使用.enableOnInput[disabled]：codepen.io/terrymun/pen/gdjhA

另外，使用 .prop() 的道具（没有双关语，呵呵）

【参考方案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