color is changing only once for Css disable button

user_5742457 0
Viewed 58

I am trying to change my button color, once it gets enabled from disable but this is happening only once. My logic for changing the color is below:

function validate(){
  if ($("#password").val().length > 4 && $("#token").val().length > 4) {
    $("#validateSign ").css({
      "background-color": "#f1f1f1",
      "background-image": "url(../../images/images/bg_btn_transaction.gif)",
      "border-color": "#428d0a",
      "color":" #428d0a",
      "border-right": "1px solid #428d0a",
      "border-bottom": "1px solid #428d0a",
      "cursor":" pointer"
    }).prop("disabled", false);
  } else {
    $("#validateSign") .prop("disabled", true);
  }
}

I am calling from my jQuery function.ready():

validate();
$("#password, #token").keyup(validate);

It's changing the color but only once. Thanks for your help in advance.

css html jquery
1 Answers

you have to undo all the css to default state in else { condition.

for the easier way, you should create css:

.nope {
    background-color: #f1f1f1;
    background-image: url(../../images/images/bg_btn_transaction.gif);
    border-color: #428d0a;
    color: #428d0a;
    border-right: 1px solid #428d0a;
    border-bottom: 1px solid #428d0a;
    cursor: pointer;
}

then your jQuery should be:

function validate(){
  if ($("#password").val().length > 4 && $("#token").val().length > 4) {
    $("#validateSign ").addClass('nope').prop("disabled", false);
  } else {
    $("#validateSign") .removeClass('nope').prop("disabled", true);
  }
}
user_50605130
Related