HTML JS

WAYS TO DISABLE ELEMENTS IN HTML DIV

GET ALL FORM ELEMENTS IN DIV var all = document.querySelectorAll("#TARGET input, #TARGET textarea, #TARGET select, #TARGET button");   DISABLE ALL for (let el of all) { el.disabled = true; }

DISABLE FORM ELEMENTS

01

GET TARGET DIV var div = document.getElementById("TARGET");   HIDE IT div.style.display = "none";

HIDE ENTIRE DIV SECTION

02

<div id="container">   <h1>TITLE</h1>   <p>TEXT</p>   <div id="overlay"></div> </div>

OVERLAY COVER

03

#container { position: relative; } #overlay {   display: none; z-index: 99;   width: 100%; height: 100%;   position: absolute; top: 0; left: 0;   background: rgba(0, 0, 0, 0.5); }

THIS WILL "DISABLE ALL CLICKS" #TARGET { pointer-events: none; } 

CSS NO POINTER EVENTS

04

NO TEXT HIGHLIGHT ALLOWED .nohighlight *::selection { background: none; } .nohighlight { user-select: none; }

CSS NO TEXT HIGHLIGHT

05