Checkbox disabling in JavaScript? This is a tricky one... 1

[ZooLee]

Hi all,

What I am trying to do is disabling/enabling a bunch of checkboxes in a table cell. This would be an easy one, but I can not use for..loop. Just because I want to display about 5000 names and all of them have a checkbox. It would be too slow to iterate the entire array and set them one by one.

Since these boxes are in a table cell that has an id, I thought there might be some ways to give disabled/enabled status to the cell and the boxes would inherit the status in some "magical" way. Any ideas?

 

[trollacious]

Unfortunately, magic and programming are from different dimensions.

There are ways to optimize loops that could speed up handling the process immensely, like unrolling a for loop. If you look on Google for "Javascript loop optimization" you should find some something to help.

Lee

 

[theniteowl]

Can you set the enabled/disabled status when you are generating the page? Or is the change in status the result of an action on the page?

Can you easily segregate the names that would be disabled into one grouping?
You might be able to position a semi-transparent layer over top of the names that should be disabled making them effectively disabled by not allowing them to be clicked.
This would be easier to accomplish if you could have a semi-transparent div in the same position as the names but set behind and then you just change it's z-index to bring it forward.
You could also try generating a layered object for each name when the page loads and setting it's index to the background in CSS then just toggling that z-index for the entire class to hide all the individual ones at once. There might be a longer load time due to the creation of all the extra objects, you will have to try it and see.


At my age I still learn something new every day, but I forget two others.

 

[ZooLee]

I am setting the status right away as the content loads into the page dynamically, but then, the user has the ability to check or uncheck one main group box that would enable/disable all "sub" boxes within one group.

Actually this layer thing is a good idea, let me try it. If it works out I'll give you a star...

 

[monksnake]

If I were your I'd try this out, most of my job consists of trying to optimize javascript execution times.

Since you have all your checkboxes in a table cell, get them all by

var checkboxArray = document.getElementById(tableCellId).getElementsByTagName("input");

Then, this is actually important for speed, put the length of the array into a variable.

var checkboxArrayLength = checkboxArray.length;

Then do your loop, it will be faster than you think.

for (a = 0; a < checkboxArrayLength; a++) {
   checkboxArray[a].disabled = true;
}

<.

 

[ZooLee]

Hmmm... interesting. Thanks! I'll try them both and let you guys know how did it go.

 

[ZooLee]

Monksnake you are da' MAN! It really does run faster. A lot faster. I've never thought it can do such a great improvement, Thank you!

 

[ZooLee]

The layer thing was ok too, but in that case, I am more worried about browser compatibility, plus that solution is more like a workaround. Before this, I iterated GetElementById and that pulled down the efficiency a lot but I saw no other way to get the list of input fields.
This simple for loop takes only a second to iterate 2000 names, so it does work pretty good. This part is also a key in the process:

document.getElementById("LX" + eid).getElementsByTagName("input")

where "eid" is my group id. So I can use this well on my tree list.

Thank you! Thank you! Thank you!

 

[monksnake]

Glad I could help

<.