Disable div tag with Javascript

Question

I wanted to disable div tag using Javascript. I don't want to hide it. I'm using Firefox browser.

I have my menus inside div tag.

I'm clicking on , 1 of menus and opening a page. On page, I have a button. When clicking on that button, I want to disable all menus but not entire page. User cannot click any menus.

My code is,

<div id="div1">
    <ul id="abc">
        Menu1 Menu2 Menu3 
    </ul>
</div>

I tried document.getElementById("div1").disabled=true; but didn't work.

Check this: http://stackoverflow.com/questions/639815/how-to-disable-all-div-content. You should search stackoverflow itself for possible similar questions before posting. — Syed Aslam, Sep 01 '12 at 18:40
What do you expect the `disabled` attribute to do, on a `div`? It's not a form element, or -typically- an interactive element of any type. — David Thomas, Sep 01 '12 at 18:45

score 0 · Answer 1 · answered Sep 01 '12 at 18:52

0

Div elements do not have a standard disabled attribute. You'll have to use custom JS to do what you'd consider to be "disabling" the div instead.

answered Sep 01 '12 at 18:52

David G

94,763
41
167
253

score 0 · Answer 2 · answered Jul 12 '15 at 13:15

You may like this example: (Uncomment the 'Visibility:hidden' line to have completely disabled the element.)

function disable(elementId, enabling) {

  el = document.getElementById(elementId);


  if (enabling) {
    el.classList.remove("masked");
  } else

  {
    el.classList.add("masked");
  }
}

.masked {
  position: relative;
  pointer-events: none;
  display: inline-block;
  //visibility:hidden; /* Uncomment this for complete disabling  */
}
.masked::before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  visibility: visible;
  opacity: 0.2;
  background-color: black;
  content: "";
}

<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
  <button onclick="alert('Sample button was clicked.')">Maskakable</button>
  <button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
  <br/>
  <button onclick="alert('Sample button was clicked.')">Maskakable</button>
  <button onclick="alert('Sample button was clicked.')">Maskakable</button>
</div>
<button>Dummy</button>

<br/>
<br/>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);"  class="masked">Disable</button>

Disable div tag with Javascript

2 Answers2