title: jQuery disable enable button style
body: <p>I am trying to make a disable enable button style using jquery.</p>
  
  <p>This is my <a href="http://codepen.io/shadowman86/pen/Buscf" rel="nofollow">DEMO</a> page from Codepen</p>
  
  <p>In my demo you can see there is a blue color submit button . When you write something in input filed then button is active.</p>
  
  <p>I want to add when this button disable color is red. If the button not desable then button color change to blue.</p>
  
  <p>I have create <code>.enableOnInput</code> and <code>.red</code> Css style for button.</p>
  
  <pre><code>.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%);
  }
  </code></pre>
  
  <p>This is my jquery for disable enable:</p>
  
  <pre><code>$(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();
            }
       });
  });
  </code></pre>