How to listen to when an element becomes disabled or enabled

disabled-control, disabled-input, dom-events, events, javascript

Solution

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
});

Problem

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 ```

Original source