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