65.9K
CodeProject is changing. Read more.
Home

jQuery enable/disable DOM elements

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (2 votes)

Nov 19, 2013

CPOL
viewsIcon

15030

jQuery plugin to enable/disble DOM elements.

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();   //Events will be removed and stored. css opacity set to 0.3
$(selector).enable();   //Events will be restored. css opacity set to 1

//It's  possible to pass a function to methods, then funcion is executed instead opacity setted
$(selector).disable(function () { $(selector).css("visibility","hidden");});
$(selector).disable(function () { $(selector).css("visibility","yes");});

//Sample to call a group of elements
var lstSelectors = ["#id1" , ".class1",".class2"]; 
$.each(lstSelectors, function (i, item) { 
     $(item).enable(); 
});