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.

 

 

REAL 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.

 

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.

 

QUICK NOTES

There is nothing to install, so just download and unzip into a folder. If you spot a bug, please feel free to comment below. I try to answer 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.

 

HOW TO DISABLE

All right, let us now get into the various ways to disable an entire div in HTML.

 

1) DISABLE FORM

1-disable-form.html
<!-- FORM INSIDE DIV -->
<div id="container"><form onsubmit="return false;">
  Name: <input type="text" name="user_name" value="John Doe"/><br>
  Email: <input type="email" name="user_email" value="john@doe.com"/><br>
  Random Story: <textarea name="user_story">I am not John Wick.</textarea><br>
  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><br>
  <input type="submit" value="Go!"/>
</form></div>

<!-- JAVASCRIPT TO DISABLE -->
<input type="button" value="Disable Form" onclick="disform()"/>
<script>
  // GET ALL FORM ELEMENTS
  var allform = document.querySelectorAll("#container input, #container textarea");
  // DISABLE ALL
  for (let el of allform) { el.disabled = true; }
  // 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 (<input> and <textarea>) using document.querySelectorAll("#container input, #container textarea").
  • Then disable them accordingly with ELEMENT.disabled = true.

 

 

2) HIDE IT…

2-hide-div.html
<!-- THE DIV -->
<div id="container">
  <h1>HELLO WORLD!</h1>
  <p>
    My name na Uvuvwevwevwe Onyetenyevwe Ugwemubwem Ossas.
  </p>
</div>

<!-- JAVASCRIPT HIDE! -->
<input type="button" value="Hide" onclick="hideit()"/>
<script>
function hideit () {
  // HIDE
  document.getElementById("container").style.display = "none";
  // SHOW
  // document.getElementById("container").style.display = "";
}
</script>
HELLO WORLD!
My name na Uvuvwevwevwe Onyetenyevwe Ugwemubwem Ossas.

Well… This is not really to disable the <div>. But consider this – If we don’t have any good use for the internal contents, then why display it, waste precious screen space, and add on to the confusion? Just hide the <div>, and show it only when necessary.

 

3) COVER ANOTHER DIV OVER IT

3-cover-over.html
<!-- (A) CSS -->
<style>
#container {
  position: relative;
}
#overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}
</style>

<!-- (B) THE DIV -->
<div id="container">
  <h1>CONTENTS INSIDE</h1>
  <input type="button" value="Click" onclick="alert('click!')"/>
 
  <!-- (C) OVERLAY -->
  <div id="overlay"></div>
</div>

 <!-- (D) 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"> itself.
  • This will block the bottom <div id="container">, effectively preventing all kinds of interactions with it – Forms, videos, clicks, highlight, etc…
  • It is done using just simple CSS – #overlay { position: absolute; width: 100%; height: 100%; } will place it over the #container.

 

 

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, just pointer-events: none. That’s all 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…

 

5) DISABLE TEXT HIGHLIGHT

5-disable-text.html
<!-- CSS STYLES -->
<style>
.nohighlight *::selection {
  background: none;
}
.nohighlight {
  user-select: none;
}
</style>

<!-- 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.

 

INFOGRAPHIC CHEAT SHEET

How To Disable Elements In HTML DIV (click to enlarge)

 

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 *