Question

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

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

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

仅供参考 - 我认为这与我的课程有关＆＃b; btn-yb＆＃39;位于我的site.css文件中，具有这些属性，但不确定

＆＃13;

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

＆＃13;

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

事情按以下顺序发生：

首先，您的内联style已应用，并将按钮的background-color设置为grey。
接下来，您的样式表将background-color设置为#008489。
最后，您的jQuery正在成功删除内嵌样式。

值得注意的是，jQuery的 css() method 会尝试修改 style property ，因此它可以仅更新内嵌样式，不外部样式表。您的内联样式已删除，而样式表规则则未删除。因此，您会看到样式表#008489 background-color。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者，您可以设置一个新的选择器来定位disabled属性，这意味着您不必担心在 HTML或jQuery中设置样式 - 所有需要处理的是.prop()：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

有关css()方法可以修改内联样式而非样式表样式的确切原因的更全面推理，请参阅我昨天写的 this answer 。

至于为什么IE的行为与Chrome不同，我认为它基于处理多个!important语句的特殊性顺序。

在jquery

2 个答案: