Question

I have some object (div, input/checkbox) in an HTML page. The values for their “checked” and “disabled” attributes are set via some JS functions. I want to listen to changes of these attributes, but couldn’t find any function or listener to perform that.

How can I add an event listener that listen on changes of “checked” or “disabled” and execute some code (e.g. changing style of checkbox / div) depending on the attributes’ status?

Thanks

Answer 1

Regarding the “disabled” change, you may be able to listen to DOMAttrModified events. See this test case for details:
http://jsfiddle.net/4kWbp/1/

Note that not all UAs support DOM mutation events like DOMAttrModified, and in those that do support them, listening to them may cause performance to detoriate.

Setting .checked directly does not trigger “change” events, and doesn’t seem to trigger DOMAttrModified either (only tested in Opera though, and this is the sort of under-specified between-the-spec-gaps stuff that might well be very inconsistent across browsers. Perhaps it’s an Opera bug.)

The last resort would perhaps be defining getters/setters for those properties. That would be a rather ugly hack though..