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

This is the DOM traversal method, but it's not that complicated:

$('#mydiv').find('input').attr('disabled','true');
$('#mydiv *').unbind();

Answer 2

What quickly springs to my mind is to use either a translucent div hovering above the old content (with such CSS options as "position: relative" and "top: -123px") or adding READONLY into your forms and buttons.

But, which ever way you choose, do remember that these changes are only clientside. Both JavaScript, HTML and CSS are very easy to alter at runtime. So, be prepared for such things also at the server side of things.

Answer 3

Something along the lines of :

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

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

Answer 4

What about a div over the disabled div?

<style>

    div.disableall { filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25; background-color: black; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 500; /* just preventing */ }

</style>

And add to the div that you want to disable:

<script type="text/javascript">
    var disable = document.createElement("div");
    disable.className = 'disableall';
    document.getElementById('mydiv').appendChild(disable);
</script>

This, i guess, should work.

ps: You should fix the z-index according to your needs

Answer 5

You can create a div to cover this dynamically - in prototype it'd be something like this:

var el = new Element("div", {style: "position: absolute; z-index: 2"});
Element.insert(document.body, el);
Element.clonePosition(el, $("mydiv"));

And then style as you'd like to show it disabled.

But if you have a good idea of what elements are in the area, it seems like disabling is the better option - this prevents keyboard access to the elements - tabbing to them and entering data or using the return key to activate them.

Answer 6

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