How to make inactive content inside a div?

css, html, layout

Solution

Without using an overlay, you can use `pointer-events: none` on the `div` using CSS.

div.disabled
{
  pointer-events: none;
    
  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

Reference

Problem

How to make content in some `div` block inactive using JavaScript? Let's say there is a button with command "Enable / Disable". And there is one div block with some text. When pushing button "Enable / Disable", is it is "Enable", you can work with content inside, but when "Disable", you can't work with content inside div block. I imagine in order to make inactive content inside div block, we need to put another layer upon that will prevent from editing content on the content div block. I'm getting confused how to realize this kind of feature.

Original source