Introduction
jQuery plugin to enable/disable DOM elements.
Background
The code adds two methods to jQuery, enable and disable. When call the disable method, and all events from the element are removed and saved.
When we call the enable method the events are restored.
Using the code
(function ($) {
$.fn.extend({
isEnabled: function () {
return ($(this).data("enabled") == undefined || $(this).data("enabled") == true);
}
,enable: function (func) {
if (func == undefined) {
$(this).css("opacity", "1");
} else {
func();
}
restoreEvents($(this));
$(this).data("enabled", true);
function restoreEvents(obj) {
if (obj.data("listEvents") == undefined) return;
var objThis = obj;
var events = obj.data("listEvents");
$.each(events, function (i, item) {
objThis.on(item.event, null, null, item.func);
});
}
}
, disable: function (func) {
var objThis = $(this);
if (func == undefined) {
$(this).css("opacity", "0.3");
} else {
func();
}
storeEvents(objThis);
objThis.data("enabled",false);
var events = objThis.data("listEvents");
if (events == undefined) return;
$.each(events, function (i, item) {
objThis.off(item.event);
});
function storeEvents(obj) {
if (obj.data("events") == null) { return; }
var list = [];
$.each(obj.data("events"), function (i, event) {
$.each(event, function (j, h) {
list.push({ event: h.type, func: h.handler });
});
});
obj.data("listEvents", list);
}
}
});
})(jQuery);
Samples of use:
$(selector).disable();
$(selector).enable();
$(selector).disable(function () { $(selector).css("visibility","hidden");});
$(selector).disable(function () { $(selector).css("visibility","yes");});
var lstSelectors = ["#id1" , ".class1",".class2"];
$.each(lstSelectors, function (i, item) {
$(item).enable();
});