How to listen to when an element becomes disabled or enabled

Question

I'm looking to make changes on nearby elements when an input or fieldset is disabled. Is there an event that listens to when an element is enabled or disabled? For example:

var input = document.createElement('input')

I'm looking for an event that would fire from toggling the disabled state:

input.disabled = !input.disabled

Answer 1

You can use MutationObserver with attributes set to true at configuration object.

var input = document.createElement("input");

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === "disabled") {
      console.log(`${mutation.target.tagName}.disabled:`
                 , `${mutation.target[mutation.attributeName]}`)
    }
  });
});

observer.observe(input, {
  attributes: true
});

input.disabled = !(input.disabled); // true

setTimeout(function() {
  input.disabled = !(input.disabled); // false
});