javascript - 禁用时如何设置按钮样式？

Question

我有一个按钮，根据它禁用的值。当它被禁用时，我想将所述按钮的 css 更改为 backgroundColor 灰色。这是启用时按钮的css：

$('#buttons').append('<button id="aceite" style="background-color:#4CAF50;border: none;color: white;padding: 5px 12px;text-align: center;display: inline-block;font-size: 16px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); margin:5px;">Aceitar</button>');

这是启用或禁用按钮的代码：

    $(document).on('click', '#aceite', function () {
                    if (item.estado == "aceite") {
                        aceite.disabled = true;

                        //I've tried like this, but it doesn't work
                        aceite.style.backgroundColor = "grey"; 

                       concluido.disabled = false;
                       recusado.disabled = false;
                    }
                    else
                    {
                      //More Code
                    }
                });

为什么它有效？

Answer 1

您可以使用内置属性，并使用它为按钮定义 CSS 样式，如果您在 JavaScript中将属性disabled设置为，这也将起作用：disabledtrue

let button = document.querySelector('#another-button');
button.disabled = true; // Make the button disabled via javascript

button[disabled] {
  /* Apply some sort of style to buttons with the disabled attribute */
  color: red;
}

<button>Regular button</button>
<button disabled>Disabled button</button>
<button id="another-button">Another disabled button</button>

Answer 2

我发现了错误，而不是使用我需要使用的变量（aceite）

document.getElementById("aceite").style.backgroundColor = "grey";

感谢所有回复的人。

Answer 3

您的代码有错误，请尝试以下代码

首先item没有声明，所以我只是创建了我们的 if 条件。并且还评论了concluido.disabled = false;，recusado.disabled = false;因为它们没有在你的代码中定义。

并且知道如果你点击你的按钮颜色正在改变。

$(document).on('click', '#aceite', function () {
    console.log("clicked..");
    var item = {
        estado: "aceite"
    };
     if (item.estado == "aceite") {
       aceite.disabled = true;

       //I've tried like this, but it doesn't work
       aceite.style.backgroundColor = "grey"; 

       // concluido.disabled = false;
       // recusado.disabled = false;
     }
     else
     {
       //More Code
     }
});