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

Question

我有一个按钮，根据值它会被禁用。当它被禁用时，我想将所述按钮的 css 更改为背景颜色灰色。这是启用时按钮的 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

您可以使用内置的 disabled 属性，并用它定义按钮的 CSS 样式，如果您将 disabled 属性设置为 ，这也可以工作JavaScript 中的 true:

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>