I am trying to make a disable enable button style using jquery.

This is my DEMO page from Codepen

In my demo you can see there is a blue color submit button . When you write something in input filed then button is active.

I want to add when this button disable color is red. If the button not desable then button color change to blue.

I have create .enableOnInput and .red Css style for button.

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

This is my jquery for disable enable:

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

I am trying to make a disable enable button style using jquery.

This is my DEMO page from Codepen

In my demo you can see there is a blue color submit button . When you write something in input filed then button is active.

I want to add when this button disable color is red. If the button not desable then button color change to blue.

I have create .enableOnInput and .red Css style for button.

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

This is my jquery for disable enable:

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

• javascript
• jquery
• css

• 2 use .prop() instead of .attr() – Anton Commented Oct 8, 2014 at 8:37
• @Anton i know this and i changed it. I want when button inactive button color is red . When button is active button color is blue. – user4082764 Commented Oct 8, 2014 at 8:40

3 Answers 3

Add this css rule:

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

Simply use addClass/removeClass methods:

 $('#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();

I also added trigged for keyup event to check initial state and set proper class.

UPD. Or as @Terry suggests in ments it's even better to change CSS selector to from .red to .enableOnInput:disabled and go with just $('.enableOnInput').prop('disabled', true). Just note that this way it will not work in IE8 and below.

Demo: http://codepen.io/anon/pen/CELut?editors=001

Add Class red to your button

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

add css rule

.red{
  background-color:red;
}

and your 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