Click here to Skip to main content
13,143,144 members (57,656 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

10.4K views
3 bookmarked
Posted 19 Nov 2013

jQuery enable/disable DOM elements

, 21 Nov 2013
Rate this:
Please Sign up or sign in to vote.
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(); 
});

License

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

Share

About the Author

meula
Software Developer (Senior)
Unknown
No Biography provided

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170915.1 | Last Updated 22 Nov 2013
Article Copyright 2013 by meula
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid