5 Ways to Disable Elements In An HTML DIV

Welcome to a tutorial on how to disable elements inside an HTML DIV.

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

 

 

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.

 

 

 

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>) using document.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>

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

 

 

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>

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.

 

 

 

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