5 Ways to Disable Elements In An HTML DIV

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 How to Disable Useful Bits & Links
The End

 

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

1-disable-form.html
<!-- (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>
Name:
Email:
Random Story:
Cate or Doge:


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>) using document.querySelectorAll().
  • Then disable them accordingly with ELEMENT.disabled = true.

 

 

METHOD 2) HIDE IT

2-hide-div.html
<!-- (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>
HELLO WORLD!
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

3-cover-over.html
<!-- (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>
CONTENTS INSIDE

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 or absolute position first.
    • To place the overlay over the container – position:absolute; top:0; width:100%; height:100%;

 

 

METHOD 4) CSS POINTER EVENT

4-pointer-event.html
<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>
CONTENTS INSIDE

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

5-disable-text.html
<!-- (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

 

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!

Leave a Comment

Your email address will not be published. Required fields are marked *