Disable HTML element in the client side (javascript)

Question

I am looking for the simplest way to disable a whole HTML element (typically a <div>).

With "disable" I mean a way to prevent the user to click on any of the elements contained into the element. For instance, if you have a form into the disabled element, the form elements won't catch the focus. I've tried with a method that traverses the DOM and disables each element it finds. It works but it seems too complex and I'm looking for a simpler method, something like $("#mydiv").disable()

I would like to prevent the user to fire other events like onmouseover, etc. and even avoid the user to select and modify elements using the keyboard. Maybe some kind of semitransparent overlay covering the whole element to be disabled could do the trick.

Is that possible with jQuery or do you know an easy way to implement it with plain JS ?

Answer 1

The jQuery plugin BlockUI is a great way to achieve this.

Answer 2

Something along the lines of :

$("#mydiv").find("input").attr('disabled','disabled');

Which basically finds all input elements in the myDiv element, and disables them.