Background color not changing in Chrome when setting css in jquery

Question

In my JQuery/JS I'm doing a check and changing the background color and border color of a button, it works fine in IE but in Chrome, Chrome doesn't set the color back to grey. IE changes, just not Chrome. When I look in the debugger at the rendered html it doesn't add the coloring, it's just not there!!! Funny thing is it adds the disabled property in Chrome, so the line of Jquery code that sets the color back to grey is def being called!

Here is my button, I initialize it with grey and being disabled

<button id="eventRegister" type="button" class="btn btn-lg btn-yb footer-button" style="background-color: grey !important; border-color: grey !important; display: none;" disabled>Register</button>

Then with a checkbox on the page for 'terms and services' I enable it and remove the grey color. But if the user un checks the checkbox and resets the button back to grey, in Chrome, it doesn't change the color. IE is fine!

$("#registerEventTerms").off('change').on('change', function () {
        if (this.checked)
            $("#eventRegister").css('background-color', '').css('border-color', '').prop('disabled', false);
        else
            $("#eventRegister").css('background-color', 'grey !important').css('border-color', 'grey !important').prop('disabled', true);
    });

FYI - I'm thinking it has something to do with my class 'btn-yb' located in my site.css file, that has these properties, but not sure

 .btn-yb { background-color: #008489 !important; color: white !important; } .btn-yb:hover, .btn-yb:focus { color: white !important; } .btn-yb.disabled, [disabled].btn-yb, fieldset[disabled] .btn-yb { opacity: 1; } 

Answer 1

 Also change your javascript <script> src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > $("#registerEventTerms").off('change').on('change', function() { if ($(this).prop('checked', true);) $("#eventRegister").css('background-color', '').css('border-color', '').prop('disabled', false); else $("#eventRegister").css('background-color', 'grey !important').css('border-color', 'grey !important').prop('disabled', true); }); </script> 

Change CSS

  .btn-yb {
  background-color: #008489;
  color: white !important;
}

.btn-yb:hover,
.btn-yb:focus {
  color: white !important;
}

.btn-yb.disabled,
[disabled].btn-yb,
fieldset[disabled] .btn-yb {
  opacity: 1;
}

Answer 2

Things are happening in the following order:

1. First, your inline style is getting applied, and setting the button's background-color to grey .
2. Next your stylsheet is setting the background-color to #008489 .
3. Finally, your jQuery is removing the inline style successfully.

It's important to note that jQuery's css() method attempts to modify the style property , and thus it can only update inline styles, not external stylesheets. Your inline style is removed, and your stylesheet rule is not. As such, you see the stylesheet's #008489 background-color .

Remember, inline styles have more specificity than stylesheet styles. This can only be overridden with !important . However, things get much more confusing with multiple !important declarations, as all your rules are essentially fighting for highest specificity. Avoid using !important whenever possible, opting for more specific CSS selectors instead.

The simplest solution to this is to just remove all of your !important declarations, as this will allow the specificity to be handled in the correct order:

 $("#registerEventTerms").off('change').on('change', function() { if (this.checked) $("#eventRegister").css('background-color', '').prop('disabled', false); else $("#eventRegister").css('background-color', 'grey').prop('disabled', true); }); 

 .btn-yb { background-color: #008489; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="eventRegister" type="button" class="btn-yb" style="background-color: grey" disabled>Register</button> 

Alternatively, you can setup a new selector to target the disabled attribute, which would mean you don't need to worry about setting styles in either HTML or jQuery - all that needs to be handled is the .prop() :

 $("#registerEventTerms").off('change').on('change', function() { if (this.checked) $("#eventRegister").prop('disabled', false); else $("#eventRegister").prop('disabled', true); }); 

 .btn-yb { background-color: #008489; color: white; } .btn-yb[disabled] { background-color: grey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="eventRegister" type="button" class="btn-yb" disabled>Register</button> 

For a more comprehensive reasoning of exactly why the css() method can modify inline styles but not stylesheet styles, please see this answer I wrote yesterday.

As for why IE is behaving differently than Chrome, I assume it's based on the order of specificity of how multiple !important statements are handled.