How to disable all div content

Question

I was under the assumption that if I disabled a div  all content got disabled too   However  the content is grayed but I can still interact with it   Is there a way to do that   disable a div and get all content disabled also

User · Accepted Answer

Many of the above answers only work on form elements. A simple way to disable any DIV including its contents is to just disable mouse interaction. For example:

$("#mydiv").addClass("disabledbutton");

CSS

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

Supplement:

Many commented like these: "This will only disallow mouse events, but the control is still enabled" and "you can still navigate by keyboard". You Could add this code to your script and inputs can't be reached in other ways like keyboard tab. You could change this code to fit your needs.

$([Parent Container]).find('input').each(function () {
     $(this).attr('disabled', 'disabled');
 });

User · Answer

Another way  in jQuery  would be to get the inner height  inner width and positioning of the containing DIV  and simply overlay another DIV  transparent  over the top the same size  This will work on all elements inside that container  instead of only the inputs   Remember though  with JS disabled  you ll still be able to use the DIVs inputs content  The same goes with the above answers too

User · Answer

If you are simply trying to stop people clicking and are not horrifically worried about security - I have found an absolute placed div with a z-index of 99999 sorts it fine  You can t click or access any of the content because the div is placed over it  Might be a bit simpler and is a CSS only solution until you need to remove it

User · Answer

Browsers tested  IE 9  Chrome  Firefox and jquery-1 7 1 min js        document  ready function                  chkDisableEnableElements   change function                  if      chkDisableEnableElements   is   checked                      enableElements     divDifferentElements   children                               else                   disableElements     divDifferentElements   children                                            function disableElements el            for  var i   0  i  lt  el length  i                  el i  disabled   true               disableElements el i  children                        function enableElements el            for  var i   0  i  lt  el length  i                  el i  disabled   false               enableElements el i  children

User · Answer

Wrap the div within a fieldset tag    lt fieldset disabled gt   lt div gt your controls lt  div gt   lt  fieldset gt

User · Answer

Here is a quick comment for people who don t need a div but just a blockelement  In HTML5  lt fieldset disabled  disabled  gt  lt  fieldset gt  got the disabled attribute  Every form element in a disabled fieldset is disabled

User · Answer

I would use an improved version of Cletus  function       fn disable   function         return this each function                     if  typeof this disabled     undefined               this  data  jquery disabled   this disabled            this disabled   true                        fn enable   function         return this each function           if  typeof this disabled     undefined             this disabled     this  data  jquery disabled                         Which stores the original  disabled  property of the element       myDiv     disable

User · Answer

This is for the searchers    The best I did is       myDiv     attr  disabled   true                          myDiv     fadeTo  slow    6

User · Answer

How to disable the contents of a DIV The CSS pointer-events property alone doesn t disable child elements from scrolling  and it s not supported by IE10 and under for DIV elements  only for SVG   http   caniuse com  feat pointer-events To disable the contents of a DIV on all browsers  Javascript     quot  myDiv quot      addClass  quot disable quot      click function          return false         Css   disable     opacity  0 4       Disable scrolling on child elements  disable div   disable textarea     overflow  hidden     To disable the contents of a DIV on all browsers  except IE10 and under  Javascript     quot  myDiv quot   addClass  quot disable quot     Css   disable        Note  pointer-events not supported by IE10 and under   pointer-events  none    opacity  0 4       Disable scrolling on child elements  disable div   disable textarea     overflow  hidden

User · Answer

the simpleset solution   look at my selector    myForm find   fieldsetUserInfo input disabled   prop  disabled   false     the fieldsetUserInfo is div contains all inputs I want to disabled or Enable  hope this helps you

User · Answer

similar to cletu s solution  but i got an error using that solution  this is the workaround      div     prop  disabled  true      or     the div id     prop  disabled  true     works fine on me

User · Answer

I just wanted to mention this extension method for enabling and disabling elements   I think it s a much cleaner way than adding and removing attributes directly   Then you simply do      div     disable

User · Answer

Use a framework like JQuery to do things like   function toggleStatus         if      toggleElement   is   checked                  idOfTheDIV  input   attr  disabled   true         else               idOfTheDIV  input   removeAttr  disabled                 Disable And Enable Input Elements In A Div Block Using jQuery should help you   As of jQuery 1 6  you should use  prop instead of  attr for disabling

User · Answer

As mentioned in comments  you are still able to access element by navigating between elements by using tab key  so I recommend this        mydiv      css   pointer-events     none     opacity      0 4       attr  tabindex     -1

User · Answer

If you wanted to keep the semantics of disabled as follows   lt div disabled  disabled  gt  Your content here  lt  div gt    you could add the following CSS  div disabled disabled      pointer-events  none    opacity  0 4      the benefit here is that you re not working with classes on the div that you want to work with

User · Answer

function disableItems divSelector       var disableInputs     divSelector  find   input   not   disabled         disableInputs attr  data-reenable   true       disableInputs attr  disabled   true      function reEnableItems divSelector       var reenableInputs     divSelector  find   data-reenable         reenableInputs removeAttr  disabled        reenableInputs removeAttr  data-reenable

User · Answer

I thought I d chip in a couple of notes     lt  div   can be disabled in IE8 9  I assume this is  incorrect   and it threw me off Don t use  removeProp    as it has a permanent effect on the element  Use  prop  disabled   false  instead     myDiv   filter  input textarea select button   prop  disabled   true  is more explicit and will catch some form elements you would miss with  input

User · Answer

Below is a more comprehensive solution to masking divs enabling   no separate CSS cover the whole page or just an element specify mask color and opacity specify Z-index so you can show popups over the mask show an hourglass cursor over the mask removing the masking div on maksOff so a different one can be shown later stretch mask when element resize return the mask element so you can style it etc   Also included is hourglassOn and hourglassOff which can be used separately     elemOrId - jquery element or element id  defaults to     lt body gt        settings color defaults to  transparent     settings opacity defaults to 1    settings zIndex defaults to 2147483647    if settings hourglasss  true change cursor to hourglass over mask function maskOn elemOrId  settings        var elem elemFromParam elemOrId       if   elem  return       var maskDiv elem data  maskDiv        if   maskDiv            maskDiv     lt div style  position fixed display inline  gt  lt  div gt                body   append maskDiv           elem data  maskDiv   maskDiv              if  typeof settings    undefined     settings   null  settings         if  typeof settings color    undefined     settings color   null  settings color  transparent       if  typeof settings opacity    undefined     settings opacity   null  settings opacity 1      if  typeof settings zIndex    undefined     settings zIndex   null  settings zIndex 2147483647      if  typeof settings hourglass    undefined     settings hourglass   null  settings hourglass false          stretch maskdiv over elem     var offsetParent   elem offsetParent        var widthPercents elem outerWidth   100 offsetParent outerWidth            var heightPercents elem outerHeight   100 offsetParent outerHeight            maskDiv width widthPercents       maskDiv height heightPercents       maskDiv offset   elem  offset             set styles     maskDiv 0  style backgroundColor   settings color      maskDiv 0  style opacity   settings opacity      maskDiv 0  style zIndex   settings zIndex       if  settings hourglass  hourglassOn maskDiv        return maskDiv        elemOrId - jquery element or element id  defaults to     lt body gt     function maskOff elemOrId        var elem elemFromParam elemOrId       if   elem  return       var maskDiv elem data  maskDiv        if   maskDiv            console log  maskOff no mask              return             elem removeData  maskDiv        maskDiv remove          elemOrId - jquery element or element id  defaults to     lt body gt        if decendents is true also shows hourglass over decendents of elemOrId  defaults to true function hourglassOn elemOrId  decendents        var elem elemFromParam elemOrId       if   elem  return       if  typeof decendents    undefined     decendents   null  decendents true       if     style contains  hourGlass     length  lt  1      lt style gt    text   hourGlass   cursor  wait  important      appendTo  head        if     style contains  hourGlassWithDecendents     length  lt  1      lt style gt    text   hourGlassWithDecendents   hourGlassWithDecendents     cursor  wait  important      appendTo  head        elem addClass decendents    hourGlassWithDecendents     hourGlass          elemOrId - jquery element or element id  defaults to     lt body gt     function hourglassOff elemOrId        var elem elemFromParam elemOrId       if   elem  return       elem removeClass  hourGlass        elem removeClass  hourGlassWithDecendents       function elemFromParam elemOrId        var elem      if  typeof elemOrId    undefined     elemOrId   null           elem    body        else if  typeof elemOrId      string     elemOrId instanceof String           elem       elemOrId       else         elem   elemOrId        if   elem    elem length   0            console log  elemFromParam no element              return null             return elem      With this you can do for example   maskOn       transparent page mask maskOn null   color  gray   opacity 0 8       gray page mask with opacity maskOff       remove page mask maskOn div      transparent div mask maskOn divId   color  gray   hourglass true       gray div mask with hourglass maskOff div      remove div mask   see jsfiddle

User · Answer

As many answers already clarified disabled is not a DIV attribute  However xHTML means Extensible HTML  It means you can define your own HTML attributes  all Frontend frameworks does that as well   And CSS supports attribute selectors which is     Use standard HTML with your defined attribute   lt div disabled gt My disabled div lt  div gt   Use CSS  div disabled      opacity  0 6    pointer-events  none     NOTE  you can use CSS attribute selector with ID or Class names as well e g   myDiv disabled        Also can apply value filter e g   following HTML disabling standard attribute with value div disabled disabled

User · Answer

yourdivid textarea   yourdivid input   yourdivid select   attr  disabled  true

User · Answer

The disabled attribute is not part of the W3C spec for DIV elements  only for form elements   The jQuery approach suggested by Martin is the only foolproof way you re going to accomplish this

User · Answer

There are configurable javascript libraries that take in a html string or dom element and strip out undesired tags and attributes  These are known as html sanitizers  For example    DOMPurify Insane sanitize-html   E g  In DOMPurify  DOMPurify sanitize   lt div gt abc lt iframe  src jAva amp Tab script alert 3  gt def lt  div gt         becomes  lt div gt abcdef lt  div gt

User · Answer

One way to achieve this is by adding the disabled prop to all children of the div  You can achieve this very easily       myDiv   find      prop  disabled   true         myDiv   finds the div   find      gets you all child nodes in all levels and  prop  disabled   true  disables each one   This way all content is disabled and you can t click them  tab to them  scroll them  etc  Also  you don t need to add any css classes

User · Answer

Or just use css and a  disabled  class  Note  don t use the disabled attribute  No need to mess with jQuery on off  This is much easier and works cross browser    disabled      position  relative     disabled after      content          position  absolute      width  100       height  inherit      background-color  rgba 0 0 0 0 1       top  0      left  0      right  0      bottom  0      Then you can shut it on and off when initializing your page  or toggling a button  if myDiv      can be edited           div   removeClass  disabled      else         div   addClass  disabled

User · Answer

HTML input controls can be disabled using  disabled  attribute as you know  Once  disabled  attribute for an input control is set  event handlers associated with such control are not invoked   You have to simulate above behavior for HTML elements that don t support  disabled  attribute like div  if you wish   If you have a div  and you want to support click or a key event on that div  then you have to do two things  1  When you want to disable the div  set its disabled attribute as usual  just to comply with the convention  2  In your div s click and or key handlers  check if disabled attribute is set on the div  If it is  then just disregard the click or key event  e g  just return immediately   If disabled attribute is not set  then do your div s click and or key event logic   Above steps are browser independent as well

User · Answer

This css only noscript solution adds an overlay above a fieldset  or a div or any other element   preventing interaction   fieldset   position  relative    fieldset disabled   after   content      display  inline-block  position  absolute  top  0  left  0  right  0  bottom  0  pointer-events  all  background  rgba 128 128 128 0 2       If you want an invisible i e  transparent overlay  set the background to e g  rgba 128 128 128 0   as it won t work without a background  The above works for IE9   The following much simpler css will work on IE11    disabled    pointer-events  none      Chrome

User · Answer

EDIT   Below I ve used  on   method  instead use  bind   method    this  bind  click   false     this  bind  contextmenu   false     to remove your setting  you can use  unbind   method  Whereas the  off   method doesn t work as expected      this  unbind  click   false      this  unbind  contextmenu   false     After researching hundreds of solutions  learning about pointer-events  below is what I did   As  Kokodoko mentioned in his solution which is apt for all browsers except IE  pointer-events work in IE11 and not in the lower versions  I also noticed in IE11  pointer-events do not work on the child elements  And hence if we have something like below    lt a href  www preshmalinetpereira wordpress com  gt  lt i class  car icon  gt  lt  i gt  lt span gt My Blog lt  span gt  lt  a gt    where span -is the child element  setting pointer-events  nonewont work    To overcome this problem I wrote a function which could act as pointer-events for IE and will work in the lower versions   In JS File  DisablePointerEvents   DisablePointerEvents      function DisablePointerEvents classId          classId  each function                this  on  click   false              this  on  contextmenu   false                In CSS File   DisablePointerEvents      pointer-events  none      opacity  0 7      cursor  default      In HTML    lt a href  www preshmalinetpereira wordpress com  class  DisablePointerEvents  gt  lt i class  car icon  gt  lt  i gt  lt span gt My Blog lt  span gt  lt  a gt    This faked the pointer-events scenario where pointer-events doesnt work and when the above condition of child elements occur   JS Fiddle for the same     https   jsfiddle net rpxxrjxh

User · Answer

You can use this simple CSS statement to disable events   my-div       pointer-events none

[javascript] How to disable all div content

Examples related to javascript

Examples related to jquery

Examples related to html