Click here to Skip to main content
15,885,278 members
Articles / Programming Languages / Javascript
Tip/Trick

jQuery enable/disable DOM elements

Rate me:
Please Sign up or sign in to vote.
4.80/5 (2 votes)
21 Nov 2013CPOL 14.9K   3  
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)


Written By
Software Developer (Senior)
Unknown
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --