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