<p>
  <input value="input">
  <button>toggle</button>
</p>
<p>
  <input type="checkbox" />
</p>
input,
button {
  font-size: 14px;
  border-radius: 5px;
  background: #fff;
  border: solid 1px #999;
  padding: 5px;
}

input:disabled {
  background: #999;
}

button:hover {
  background: #ccc;
}
button:active {
  background: #ddd;
}
document.querySelector('button').onclick = e=>{
  const input = document.querySelector('input');
  input.disabled = !input.disabled;
};
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.