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.

Solution 1

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.

Solution 2

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

Comments

[Daniel Katz]

Is it possible to turn it off/on according to my needs?

[Anil]

I don't remember (Sorry!), this was from a few years ago now, The github repo can be found here: github.com/darcyclarke/Watch.js - You should be able to look over the source code and see if there is a function or property to toggle it.