how to disable DIV element and everything inside

Question

I need to disable a DIV and all it s content using Javascript   I can swear that doing a simple    lt div disabled  true  gt     was working for me before  but for some reason it no longer works   I don t understand why   In IE10  the text  Click Me  is not greyed out and click handler still works   I actually need this working for IE10   Below is my code    lt html gt       lt script gt           function disableTest                 document getElementById  test   disabled   true              var nodes   document getElementById  test   getElementsByTagName                   for var i   0  i  lt  nodes length  i                     nodes i  disabled   true                                    lt  script gt    lt body onload  disableTest     gt      lt div id  test  gt          lt div onclick  alert  hello     gt             Click Me         lt  div gt      lt  div gt    lt  body gt   lt  html gt

User · Answer

I think inline scripts are hard to stop instead you can try with this:

<div id="test">
    <div>Click Me</div>
</div>

and script:

$(function () {
    $('#test').children().click(function(){
      alert('hello');
    });
    $('#test').children().off('click');
});

CHEKOUT FIDDLE AND SEE IT HELPS

Read More about .off()

User · Answer

You can t use  disable  to disable a click event  I don t know how or if it worked in IE6-9  but it didn t work on Chrome  and it shouldn t work on IE10 like that   You can disable the onclick event  too  by attaching an event that cancels     function          function cancel      return false         document getElementById  test   disabled   true      var nodes   document getElementById  test   getElementsByTagName           console log nodes       for  var i   0  i  lt  nodes length  i              nodes i  setAttribute  disabled   true           nodes i  onclick   cancel                Furthermore  setting  disabled  on a node directly doesn t necessarily add the attribute- using setAttribute does   http   jsfiddle net 2fPZu

User · Answer

pure javascript no jQuery   x000D   x000D  function sah     x000D        div2   attr  disabled    disabled   off  click    x000D    var x1     div2   hasClass  disabledDiv    x000D     x000D     x1  true      div2   removeClass  disabledDiv       div2   addClass  disabledDiv    x000D    sah1 document getElementById  div1     x000D   x000D    x000D   x000D      function sah1 el    x000D          try   x000D              el disabled   el disabled   false   true  x000D            catch  E     x000D          if  el childNodes  amp  amp  el childNodes length  gt  0    x000D              for  var x   0  x  lt  el childNodes length  x      x000D                  sah1 el childNodes x    x000D                x000D            x000D        x000D   div2  x000D    padding 5px 10px  x000D    background-color  777  x000D    width 150px  x000D    margin-bottom 20px  x000D    x000D   disabledDiv   x000D      pointer-events  none  x000D      opacity  0 4  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 0 2 jquery min js  gt  lt  script gt  x000D   lt div id  div1  gt  x000D           lt div id  div2  onclick  alert  Hello    gt Click me lt  div gt  x000D           lt input type  text  value  SAH Computer    gt  x000D           lt br   gt  x000D           lt input type  button  value  SAH Computer    gt  x000D           lt br   gt  x000D           lt input type  radio  name  sex  value  Male    gt Male x000D           lt Br   gt  x000D           lt input type  radio  name  sex  value  Female    gt Female x000D           lt Br   gt  x000D       lt  div gt  x000D       lt Br   gt  x000D       lt Br   gt  x000D       lt input type  button  value  Click  onclick  sah      gt  x000D   x000D   x000D

User · Answer

The following css statement disables click events  pointer-events none

User · Answer

Try this         test     attr  disabled    disabled   off  click      I don t see you using jquery above  but you have it listed as a tag

[javascript] how to disable DIV element and everything inside

CHEKOUT FIDDLE AND SEE IT HELPS

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css