I have a plex UI with several nested tables, a repeater control and several other HTML controls that have their disable attribute set based on business logic in JQuery.

I need a way to disable the entire table (including nested controls, UI elements etc) and re-enable them when a user toggles a button.

I could iterate through the controls, find each of them and apply the "disable" attribute, but when the user chooses to enable, I will need to go through the trouble of checking if each of the control was initially enabled or not (based on the business logic as explained in para 1)

All I need is a way to leave the initial UI alone and overlay the disable/enable functionality on the UI.

Is there a easy way of acplishing this?

I have a plex UI with several nested tables, a repeater control and several other HTML controls that have their disable attribute set based on business logic in JQuery.

I need a way to disable the entire table (including nested controls, UI elements etc) and re-enable them when a user toggles a button.

I could iterate through the controls, find each of them and apply the "disable" attribute, but when the user chooses to enable, I will need to go through the trouble of checking if each of the control was initially enabled or not (based on the business logic as explained in para 1)

All I need is a way to leave the initial UI alone and overlay the disable/enable functionality on the UI.

Is there a easy way of acplishing this?

• javascript
• jquery

• try this fiddle on IE. jsfiddle/3KycY/1 – deostroll Commented Jan 9, 2012 at 14:10

5 Answers 5

This is where jQuery Selectors rock. If you give each of these items a class of say "disable" then you can select all of the items with jQuery by doing a simple $(".disable").

Now that you have all of the elements you can do whatever you want with them all at once say for example

$(".disable").attr("disable","disable");

I would use a div to layer over the entire table, essentially making it "unclickable". Checkout the BlockUI plugin for this.

However, this does not prevent the user from navigating through the underlying input elements and hyperlinks with the TAB key, and then they can invoke them using the ENTER key. To prevent this, you must disable all the input elements and anchors (and re-enable them when appropriate). That can be done easily, of course, using jQuery...

// Disable
$("#tableIdHere").children(":input, a").attr("disabled", "disabled");

// Enable
$("#tableIdHere").children(":input, a").removeAttr("disabled");

Perhaps a more efficient approach would be to disabled the entire table instead of looping through its children. I've done this with success before using IE, but I am not sure if the results will be consistent across browsers; I will leave that up to you to test...

$("#tableIdHere").attr("disabled", "disabled");

checkout the blockUI plugin. you can put a grey div over the entire table with it.

This will have the same effect as disabling every table control.

If you choose to write your own script iterate over all the controls when disabling them, check the value of disabled before you do so. For controls that are not disabled when you disable them, chuck them into a window- (or class-) level array variable. Then, when you want to re-enable them, iterate the array only, rather than all of the controls.

Example disable code:

window.enableList = new Array();
controls = tableElement.getElementsByTagName("input"); // May need to repeat this for "select" and "textarea"
for(i = 0; i < controls.length; i++) {
    control = controls[i];
    if(!control.disabled) {
        control.disabled = true;
        window.enableList[enableList.length] = control;
    }
}

Example re-enable code:

for(i = 0; i < window.enableList.length; i++) {
     window.enableList[i].disabled = false;
}

for(var i =0; i< window.enebalelist.length; i++) { window.enablesList[i].disable = True;}