Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

jQuery enable/disable DOM elements

4.80/5 (2 votes)
21 Nov 2013CPOL 15K  
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 

JavaScript
(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:

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)