javascript - jQuery disable enable button style -

javascript - jQuery disable enable button style -

i trying create disable enable button style using jquery.

this demo page codepen

in demo can see there bluish color submit button . when write in input filed button active.

i want add together when button disable color red. if button not desable button color alter blue.

i have create .enableoninput , .red css style 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 jquery disable enable:

$(function(){ $('#searchinput, #searchinput2').keyup(function(){ if ($(this).val() == '') { //check see if there text entered //if there no text within input 10 disable button $('.enableoninput').attr('disabled', 'true'); $(".aa").show(); $(".bb").hide(); } else { //if there text in input, enable button $('.enableoninput').attr('disabled', false); $(".aa").hide(); $(".bb").show(); } }); });

simply utilize addclass/removeclass methods:

$('#searchinput, #searchinput2').keyup(function(){ if ($(this).val() == '') { //check see if there text entered //if there no text within input 10 disable button $('.enableoninput').prop('disabled', true).addclass('red'); $(".aa").show(); $(".bb").hide(); } else { //if there text in input, enable button $('.enableoninput').prop('disabled', false).removeclass('red'); $(".aa").hide(); $(".bb").show(); } }).keyup();

i added trigged keyup event check initial state , set proper class.

upd. or @terry suggests in comments it's improve alter css selector .red .enableoninput:disabled , go $('.enableoninput').prop('disabled', true). note way not work in ie8 , below.

demo: http://codepen.io/anon/pen/celut?editors=001

javascript jquery css