jQuery object disabled event listener, how to detect when a html attribute changes

Question

I need to make an event listener for a select tag. It should be triggered any time the element becomes disabled or enabled.

Is this even possible?

P.S.: onchange does not detect disabling.

Answer 1

JQuery 1.6+

You can change jQuery prophooks:

jQuery.propHooks.disabled = {
  set: function (el, value) {
    if (el.disabled !== value) {
      el.disabled = value;
      value && $(el).trigger('disabledSet');
      !value && $(el).trigger('enabledSet');
    }
  }
};

This will trigger "disabledSet" if element is disabled via:

$(element).prop('disabled', true);

and will trigger "enabledSet" if element is enabled via:

$(element).prop('disabled', false);

Then you can just listen to your event like this:

$(element).on('disabledSet', myDisabledHandler);

Answer 2

It is possible using this jquery .watch plugin.

http://darcyclarke.me/development/detect-attribute-changes-with-jquery/

The plugin detects for css changes, but i edited it in this JSfiddle to work for attributes.

Check out this JSfiddle.