Welcome to a tutorial on how to disable elements inside an HTML DIV.
To quickly disable all form elements in an HTML DIV, we can get the elements using the query selector and disable them accordingly:
var all = document.querySelectorAll("#container select, #container input, #container textarea, #container button");
for (let el of all) { el.disabled = true; }
Otherwise, when it comes to “disabling a DIV”, that could literally mean anything. From disabling a form placed inside it, to stopping videos, to preventing copy-paste, preventing text highlight, to removing on click events – There is no “universal way to disable everything”.
Just how do we “blanket disable” all of these then? Well, there are still a couple of tricks and alternatives – Let us walk through some examples in this guide, read on!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
QUICK SLIDES
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
HOW TO DISABLE
All right, let us now get into the various ways to disable an entire div in HTML.
METHOD 1) DISABLE FORM
<!-- (A) FORM INSIDE DIV -->
<div id="container"><form onsubmit="return false;">
Name: <input type="text" name="user_name" value="John Doe"/>
Email: <input type="email" name="user_email" value="john@doe.com"/>
Random Story: <textarea name="user_story">I am not John Wick.</textarea>
Cate or Doge:
<label>
<input type="radio" name="user_pet" value="Cate" checked/> Cate
</label>
<label>
<input type="radio" name="user_pet" value="Doge"/> Doge
</label>
<input type="submit" value="Go!"/>
</form></div>
<!-- (B) JAVASCRIPT TO DISABLE -->
<input type="button" value="Disable Form" onclick="disform()"/>
<script>
// (B1) GET ALL FORM ELEMENTS
var all = document.querySelectorAll("#container select, #container input, #container textarea, #container button");
// (B2) DISABLE ALL
for (let el of all) { el.disabled = true; }
// (B3) TO ENABLE
// for (let el of allform) { el.disabled = false; }
</script>
This one should be pretty straightforward – If it is just a <form>
inside the <div>
that you want to disable:
- Grab all the form elements (
<select> <input> <textarea> <button>
) usingdocument.querySelectorAll()
. - Then disable them accordingly with
ELEMENT.disabled = true
.
METHOD 2) HIDE IT
<!-- (A) DIV TO "DISABLE" -->
<div id="container">
<h1>HELLO WORLD!</h1>
<p>My name na Uvuvwevwevwe Onyetenyevwe Ugwemubwem Ossas.</p>
</div>
<!-- (B) JAVASCRIPT HIDE -->
<input type="button" value="Hide" onclick="hideit()"/>
<script>
function hideit () {
// (B1) TO HIDE
document.getElementById("container").style.display = "none";
/// (B2) TO SHOW
// document.getElementById("container").style.display = "";
}
</script>
My name na Uvuvwevwevwe Onyetenyevwe Ugwemubwem Ossas.
This is not really “disable”, but to “hide”. If we don’t have any good use for a particular section, then why add to the confusion by showing it? Just hide the <div>
and show it only when necessary.
METHOD 3) COVER ANOTHER DIV OVER IT
<!-- (A) CSS -->
<style>
/* (A1) SET RELATIVE POSITION ON CONTAINER */
#container { position: relative; }
/* (A2) OVERLAY OVER CONTAINER */
#overlay {
display: none; z-index: 99;
width: 100%; height: 100%;
position: absolute; top: 0; left: 0;
background: rgba(0, 0, 0, 0.5);
}
</style>
<!-- (B) DIV TO "DISABLE" -->
<div id="container">
<!-- (B1) CONTENTS -->
<h1>CONTENTS INSIDE</h1>
<input type="button" value="Click" onclick="alert('click!')"/>
<!-- (B2) OVERLAY -->
<div id="overlay"></div>
</div>
<!-- (C) JAVASCRIPT -->
<input type="button" value="Cover It" onclick="coverover()"/>
<script>
function coverover () {
document.getElementById("overlay").style.display = "block";
// document.getElementById("overlay").style.display = "none";
}
</script>
The magic of modern CSS.
- We can cover an extra layer of
<div id="overlay">
over the container<div id="container">
. - This will block the bottom
<div id="container">
, effectively preventing all kinds of interactions with it – Forms, videos, clicks, highlights, etc… - It is done using just some simple CSS.
- The container must be set to
relative
orabsolute
position first. - To place the overlay over the container –
position:absolute; top:0; width:100%; height:100%;
- The container must be set to
METHOD 4) CSS POINTER EVENT
<style>
#container { pointer-events: none; }
</style>
<div id="container">
<h1>CONTENTS INSIDE</h1>
<input type="button" value="Click" onclick="alert('click 1')"/>
<input type="button" value="Click" onclick="alert('click 2')"/>
<input type="button" value="Click" onclick="alert('click 3')"/>
</div>
Yep, pointer-events: none
is all it takes to disable all the button clicks inside a container. Take note this will not work on ancient browsers that do not support pointer-events
though.
METHOD 5) DISABLE TEXT HIGHLIGHT
<!-- (A) CSS DISABLE HIGHLIGHT -->
<style>
.nohighlight *::selection { background: none; }
.nohighlight { user-select: none; }
</style>
<!-- (B) CONTAINER -->
<div class="nohighlight">
<h1>RANDOM CONTENTS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet volutpat diam.</p>
</div>
RANDOM CONTENTS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet volutpat diam.
If you just want to disable the highlighting of text to prevent people from copying, simply use CSS user-select: none
to do it. .nohighlight *::selection { background: none }
is kind of an extra to not show highlight background colors.
USEFUL BITS & LINKS
That’s all for this guide, and here is a small section on some extras and links that may be useful to you.
LINKS & REFERENCES
- How to disable DIV element and everything inside – StackOverflow
- How to make inactive content inside a div? – StackOverflow
- Is it possible to turn off or disable a <div> – TeamTreeHouse
THE END
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!