Hoe maak je inactieve inhoud in een div?

Hoe kan ik inhoud in een divblok inactief maken met JavaScript?

Stel dat er een knop is met het commando “Inschakelen / Uitschakelen”. En er is één div-blok met wat tekst. Als u op de knop “Inschakelen / Uitschakelen” drukt, is het “Inschakelen”, u kunt met inhoud erin werken, maar wanneer u op “Uitschakelen” werkt, kunt u niet werken met inhoud in het div-blok.

Ik kan me voorstellen dat om inactieve inhoud binnen het div-blok te maken, we een andere laag moeten aanbrengen die voorkomt dat inhoud in het inhouds-div-blok wordt bewerkt.

Ik raak in de war hoe ik dit soort functies moet realiseren.

Antwoord 1, autoriteit 100%

Zonder een overlay te gebruiken, kunt u pointer-events: nonegebruiken op de divin CSS, maar dit werkt niet in IE of Opera.

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

Referentie

Antwoord 2, autoriteit 42%

Stel pointer-events in als geen voor de div [disabled] in CSS,

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

U kunt div uitschakelen door uitgeschakelde kenmerken toe te voegen.

<div disabled>
  /* Contents */
</div>

Antwoord 3, autoriteit 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;  
}

Antwoord 4

Met jQuery zou je zoiets als dit kunnen doen:

// To disable 
$('#targetDiv').children().attr('disabled', 'disabled');
// To enable
$('#targetDiv').children().attr('enabled', 'enabled');

Hier is een jsFiddle-voorbeeld: http://jsfiddle.net/monknomo/gLukqygq/

U kunt ook de onderliggende items van de doel-div selecteren en er een ‘uitgeschakelde’ CSS-klasse aan toevoegen met verschillende visuele eigenschappen als toelichting.

//disable by adding disabled class
$('#targetDiv').children().addClass("disabled");
//enable by removing the disabled class
$('#targetDiv').children().removeClass("disabled");

Hier is een jsFiddle met als voorbeeld: https://jsfiddle.net/monknomo/g8zt9t3m/

Antwoord 5

als u een hele div van de weergave in een ander schermformaat wilt verbergen. U kunt de onderstaande code als voorbeeld volgen.

div.disabled{
  display: none;
}