web-dev-qa-db-fra.com

Comment rendre le contenu inactif dans une div?

Comment rendre inactif du contenu dans un bloc div en utilisant JavaScript?

Disons qu'il y a un bouton avec la commande "Activer/Désactiver". Et il y a un bloc div avec du texte. Lorsque vous appuyez sur le bouton "Activer/Désactiver", si c'est "Activer", vous pouvez travailler avec du contenu à l'intérieur, mais lorsque "Désactiver", vous ne pouvez pas travailler avec du contenu à l'intérieur du bloc div.

J'imagine que pour rendre le contenu inactif à l'intérieur du bloc div, nous devons mettre une autre couche dessus qui empêchera de modifier le contenu sur le bloc div de contenu.

Je ne comprends pas comment réaliser ce genre de fonctionnalité.

csslayouthtml
25
ilnur777

Sans utiliser de superposition, vous pouvez utiliser pointer-events: none sur le div en CSS, mais cela ne fonctionne pas dans IE ou Opera.

div.disabled
{
  pointer-events: none;

  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

Référence

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

Le code ci-dessus rend le contenu du div désactivé. Vous pouvez désactiver div en ajoutant un attribut désactivé.

<div disabled>
  /* Contents */
</div>
8
Pramod

En utilisant jquery, vous pourriez faire quelque chose comme ceci:

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

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

Voici un exemple jsFiddle: http://jsfiddle.net/monknomo/gLukqygq/

Vous pouvez également sélectionner les enfants du div cible et leur ajouter une classe CSS "désactivée" avec différentes propriétés visuelles comme légende.

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

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

Voici un jsFiddle avec le comme exemple: https://jsfiddle.net/monknomo/g8zt9t3m/

0
monknomo

si vous souhaitez masquer une division entière de la vue dans une autre taille d'écran. Vous pouvez suivre le code ci-dessous comme exemple.

div.disabled{
  display: none;
}
0
Vayodya Tamari