在 jquery 中设置 css 时，Chrome 中的背景颜色不会改变

Question

在我的 JQuery/JS 中，我正在检查并更改按钮的背景颜色和边框颜色，它在 IE 中运行良好，但在 Chrome 中，Chrome 不会将颜色设置回灰色。 IE 改变了，只是 Chrome 没有改变。当我在调试器中查看渲染的 html 时，它没有添加颜色，只是不存在！！！有趣的是它在 Chrome 中添加了 disabled 属性，因此将颜色设置回灰色的 Jquery 代码行被调用 def！

这是我的按钮，我用灰色初始化它并被禁用

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

然后在页面上的“条款和服务”复选框中启用它并删除灰色。但是，如果用户取消选中复选框并将按钮重置为灰色，在 Chrome 中，它不会更改颜色。 IE没问题！

$("#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);
    });

仅供参考 - 我认为这与我的 site.css 文件中的类“btn-yb”有关，它具有这些属性，但不确定

.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>

更改 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

事情按以下顺序发生：

1. 首先，您的内联 style 将被应用，并将按钮的 background-color 设置为 grey。
2. 接下来，您的样式表将 background-color 设置为 #008489。
3. 最后，您的 jQuery 成功移除了 inline 样式。

需要注意的是，jQuery 的 css() method 试图修改 style property，因此它只能更新 inline 样式， 不是外部样式表。您的内联样式被删除，您的样式表规则没有。因此，您会看到样式表的 #008489 background-color。

请记住，内联样式比样式表样式更具体。这只能被!important 覆盖。但是，多个!important 声明会使事情变得更加更加混乱，因为您的所有规则本质上都是在争取最高的特异性。尽可能避免使用!important，而是选择more specific CSS selectors。

对此最简单的解决方案是删除所有!important 声明，因为这样可以以正确的顺序处理特定性：

$("#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>

或者，您可以设置一个新的选择器来定位 disabled 属性，这意味着您无需担心在 HTML 或 jQuery 中设置样式 - 所有这些都需要处理的是.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>

关于为什么css() 方法可以修改内联样式但不能修改样式表样式的更全面的推理，请参阅我昨天写的this answer。

至于为什么 IE 的行为与 Chrome 不同，我认为这是基于处理多个 !important 语句的具体顺序。