jQuery禁用启用按钮样式

jQuery disable enable button style

本文关键字：按钮 样式 启用 jQuery      更新时间：2023-09-26

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

这是我在Codepen 上的演示页面

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

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

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

.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();
          }
     });
});

添加此css规则：

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

只需使用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();

我还添加了triggered for keyup事件来检查初始状态并设置正确的类。

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

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

将类别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');
          }
     });
});

更新的链接

相关文章：