How to make inactive content inside a div? - css

Question

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.

Answer 1

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

Answer 2

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>

Answer 3

div[disabled]
{
pointer-events: none;
opacity: 0.6;
background: rgba(200, 54, 54, 0.5);
background-color: yellow;
filter: alpha(opacity=50);
zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}

Answer 4

Using jquery you might do something like this:
// To disable
$('#targetDiv').children().attr('disabled', 'disabled');
// To enable
$('#targetDiv').children().attr('enabled', 'enabled');
Here's a jsFiddle example: http://jsfiddle.net/monknomo/gLukqygq/
You could also select the target div's children and add a "disabled" css class to them with different visual properties as a callout.
//disable by adding disabled class
$('#targetDiv').children().addClass("disabled");
//enable by removing the disabled class
$('#targetDiv').children().removeClass("disabled");
Here's a jsFiddle with the as an example: https://jsfiddle.net/monknomo/g8zt9t3m/

Answer 5

if you want to hide a whole div from the view in another screen size. You can follow bellow code as an example.
div.disabled{
display: none;
}