How to make inactive content inside a div?

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.

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

Set pointer-events as none for the div[disabled] in CSS,

div[disabled]
{
    pointer-events: none;
    opacity: 0.7; 
}

You can make div disabled by adding disabled attributes.

<div disabled>
  <!-- Contents -->
</div>