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

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

• javascript
• events
• dom-events
• disabled-input
• disabled-control

• 1 maybe developer.mozilla/en/docs/Web/API/MutationObserver – Isaac Commented Oct 24, 2016 at 23:58

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