0

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;
}

Improve this question

2 Answers 2

Reset to default
3 

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;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

it's not a question of the check reaching the line of code or not, it is! The code even disables the button, it just doesn't set the css color. So I'm not sure if Chrome acts differently then IE when it comes to over riding elements css properties
remove !important from css .btn-yb{ background-color: #008489; }
ya that's it. why doesn't Chrome allow this but IE does??
@user1186050 did you get any any error in your chrome's javascript console.
No! I just tested it and looked in the console, nothing! Funny!
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.