Change color icon button javascript

Question

I have the button:

<button id="btnVoltar" style="margin-bottom:0;vertical-align:middle" type="button" class="btn-flat bg-red btn-circle-lg waves-effect" onclick="voltaparaConsulta()">
    <i class="material-icons">arrow_back</i>
</button>

I can change the color of his icon with a javascript without problem using the syntax below:

document.getElementById("btnEditar").style.color = "#FFFFFF";

However, I only wanted this to be changed if the button was disable. To let disable use the following syntax:

document.getElementById("btnEditar").disabled = true;

How do I do that?

Answer 1

Using CSS with pseudo class disabled. You set the color in the CSS, and disable the Javascript button normally.

See working:

document.getElementById('desativar').addEventListener('click', function() {
  document.getElementById("btnVoltar").disabled = true;
});

button:disabled {
  color: #FFFFFF;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet" />

<button id="btnVoltar">
    <i class="material-icons">arrow_back</i>
</button>

<button id="desativar">Clique para desabilitar o botão</button>