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 ?

Vincent Robert · Accepted Answer · 2009-02-02 21:48:14Z

5

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

answered Feb 2, 2009 at 21:48

Vincent Robert

36.2k15 gold badges84 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Guido Over a year ago

Thank you. Maybe a little bigger than expected (14KB), but it really works. It evens prevent the user from user the keyboard to interact with the elements. Lets see if anyone else comes with the one-line solution before accepting this answer.

Andreas Grech · Accepted Answer · 2009-02-02 20:42:29Z

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.

answered Feb 2, 2009 at 20:42

Andreas Grech

108k102 gold badges303 silver badges362 bronze badges

1 Comment

Ed Orsi Over a year ago

$("#mydiv input").attr('disabled', 'true'); Is cleaner and probably faster.

José Leal · Accepted Answer · 2009-02-02 20:46:19Z

1

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

answered Feb 2, 2009 at 20:46

José Leal

8,1699 gold badges40 silver badges54 bronze badges

Comments

Andy Baird · Accepted Answer · 2009-02-03 00:00:37Z

1

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

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

edited Feb 3, 2009 at 0:00

answered Feb 2, 2009 at 20:40

Andy Baird

6,2674 gold badges46 silver badges64 bronze badges

3 Comments

strager Over a year ago

I think you want $('#mydiv *').unbind();

Andy Baird Over a year ago

Cool! Always finding out new stuff with jQuery.

Guido Over a year ago

Does the unbind method prevent the user from selecting elements with the keyboard (navigating with the Tab key)?

Henrik Paul · Accepted Answer · 2009-02-02 20:41:45Z

0

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.

answered Feb 2, 2009 at 20:41

Henrik Paul

68k32 gold badges87 silver badges96 bronze badges

Comments

rlw · Accepted Answer · 2009-02-02 20:55:43Z

0

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.

answered Feb 2, 2009 at 20:55

rlw

8325 silver badges15 bronze badges

Comments

Z. Dmitry · Accepted Answer · 2017-06-27 21:12:32Z

0

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

http://malsup.com/jquery/block/

answered Jun 27, 2017 at 21:12

Z. Dmitry

3217 silver badges22 bronze badges

Collectives™ on Stack Overflow

Disable HTML element in the client side (javascript)

7 Answers 7

1 Comment

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related