Comment désactiver tout le contenu div

J'étais sous l'hypothèse que si je désactivais une div, tout le contenu était également désactivé.

Cependant, le contenu est grisé mais je peux toujours interagir avec lui.

Y-a-t-il un moyen de faire ça? (désactivez une div et désactivez également tout le contenu)

La plupart des réponses ci-dessus ne fonctionnent que sur les éléments de formulaire. Un moyen simple de désactiver une DIV, y compris son contenu, consiste simplement à désactiver l'interaction avec la souris. Par exemple:

$("#mydiv").addClass("disabledbutton");

css

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

Utilisez un framework comme JQuery pour faire des choses comme:

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#idOfTheDIV :input').attr('disabled', true);
    } else {
        $('#idOfTheDIV :input').removeAttr('disabled');
    }   
}

Désactiver et activer les éléments d'entrée dans un bloc Div à l'aide de jQuery devrait vous aider!

Depuis jQuery 1.6, vous devez utiliser .propau lieu de .attrpour désactiver.

Je voulais juste mentionner cette méthode d'extension pour activer et désactiver des éléments . Je pense que c'est une manière beaucoup plus propre que d'ajouter et de supprimer directement des attributs.

Ensuite, vous faites simplement:

$("div *").disable();

Voici un commentaire rapide pour les personnes qui n'ont pas besoin d'un div mais simplement d'un blockelement. En HTML5 a <fieldset disabled="disabled"></fieldset>obtenu l'attribut désactivé. Chaque élément de formulaire dans un jeu de champs désactivé est désactivé.

L'attribut désactivé ne fait pas partie de la spécification W3C pour les éléments DIV , uniquement pour les éléments de formulaire .

L'approche jQuery suggérée par Martin est la seule façon infaillible que vous allez accomplir cela.

similaire à la solution de cletu, mais j'ai eu une erreur en utilisant cette solution, voici la solution:

$('div *').prop('disabled',true);
// or
$('#the_div_id *').prop('disabled',true);

fonctionne bien sur moi

Vous pouvez utiliser cette simple instruction CSS pour désactiver les événements

#my-div {
    pointer-events:none;
}

Navigateurs testés: IE 9, Chrome, Firefox et jquery-1.7.1.min.js

    $(document).ready(function () {
        $('#chkDisableEnableElements').change(function () {
            if ($('#chkDisableEnableElements').is(':checked')) {
                enableElements($('#divDifferentElements').children());
            }
            else {
                disableElements($('#divDifferentElements').children());
            }
        });
    });

    function disableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = true;

            disableElements(el[i].children);
        }
    }

    function enableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = false;

            enableElements(el[i].children);
        }
    }

Une façon d'y parvenir consiste à ajouter l'hélice handicapée à tous les enfants de la div. Vous pouvez y parvenir très facilement:

$("#myDiv").find("*").prop('disabled', true);

$("#myDiv")trouve le div, .find("*")obtient tous les nœuds enfants à tous les niveaux et .prop('disabled', true)désactive chacun d'eux.

De cette façon, tout le contenu est désactivé et vous ne pouvez pas cliquer dessus, y tabuler, les faire défiler, etc. De plus, vous n'avez pas besoin d'ajouter de classes CSS.

Les contrôles d'entrée HTML peuvent être désactivés en utilisant l'attribut «désactivé» comme vous le savez. Une fois l'attribut «désactivé» pour un contrôle d'entrée défini, les gestionnaires d'événements associés à ce contrôle ne sont pas appelés.

Vous devez simuler le comportement ci-dessus pour les éléments HTML qui ne prennent pas en charge l'attribut «désactivé» comme div, si vous le souhaitez.

Si vous avez un div et que vous souhaitez prendre en charge le clic ou un événement clé sur ce div, vous devez faire deux choses: 1) Lorsque vous souhaitez désactiver le div, définissez son attribut désactivé comme d'habitude (juste pour se conformer à la convention) 2) Dans les gestionnaires de clics et / ou de clés de votre div, vérifiez si l'attribut désactivé est défini sur le div. Si tel est le cas, ignorez simplement l'événement de clic ou de clé (par exemple, revenez immédiatement). Si l'attribut désactivé n'est pas défini, effectuez la logique d'événement de clic et / ou de clé de votre div.

Les étapes ci-dessus sont également indépendantes du navigateur.

Enveloppez le divdans une fieldsetbalise:

<fieldset disabled>
<div>your controls</div>
</fieldset>

Je pensais que j'allais ajouter quelques notes.

1. <div> peut être désactivé dans IE8 / 9. Je suppose que c'est "incorrect", et ça m'a bouleversé
2. N'utilisez pas .removeProp (), car cela a un effet permanent sur l'élément. Utilisez plutôt .prop ("désactivé", faux)
3. $ ("# myDiv"). filter ("input, textarea, select, button"). prop ("disabled", true) est plus explicite et capturera certains éléments de formulaire qui vous manqueraient avec: input

C'est pour les chercheurs,

Le mieux que j'ai fait,

$('#myDiv *').attr("disabled", true);                   
$('#myDiv *').fadeTo('slow', .6);

Comme mentionné dans les commentaires, vous pouvez toujours accéder à l'élément en naviguant entre les éléments à l'aide de la touche de tabulation. donc je recommande ceci:

$("#mydiv")
  .css({"pointer-events" : "none" , "opacity" :  "0.4"})
  .attr("tabindex" , "-1");

Si vous souhaitez conserver la sémantique de désactivé comme suit

<div disabled="disabled"> Your content here </div>

vous pouvez ajouter le CSS suivant

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

l'avantage ici est que vous ne travaillez pas avec des classes sur le div avec lequel vous voulez travailler

J'utiliserais une version améliorée de la fonction de Cletus:

 $.fn.disable = function() {
    return this.each(function() {          
      if (typeof this.disabled != "undefined") {
        $(this).data('jquery.disabled', this.disabled);

        this.disabled = true;
      }
    });
};

$.fn.enable = function() {
    return this.each(function() {
      if (typeof this.disabled != "undefined") {
        this.disabled = $(this).data('jquery.disabled');
      }
    });
};

Qui stocke la propriété «désactivée» d'origine de l'élément.

$('#myDiv *').disable();

Comment désactiver le contenu d'un DIV

La pointer-eventspropriété CSS seule ne désactive pas le défilement des éléments enfants, et elle n'est pas prise en charge par IE10 et sous pour les éléments DIV (uniquement pour SVG). http://caniuse.com/#feat=pointer-events

Pour désactiver le contenu d'un DIV sur tous les navigateurs.

Javascript:

$("#myDiv")
  .addClass("disable")
  .click(function () {
    return false;
  });

Css:

.disable {
  opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
  overflow: hidden;
}

Pour désactiver le contenu d'un DIV sur tous les navigateurs, sauf IE10 et versions antérieures.

Javascript:

$("#myDiv").addClass("disable");

Css:

.disable {
  // Note: pointer-events not supported by IE10 and under
  pointer-events: none;
  opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
  overflow: hidden;
}

Vous trouverez ci-dessous une solution plus complète pour masquer les divisions permettant

• pas de CSS séparé
• couvrir toute la page ou juste un élément
• spécifier la couleur et l'opacité du masque
• spécifiez l'index Z pour pouvoir afficher des fenêtres contextuelles sur le masque
• afficher un curseur de sablier sur le masque
• suppression de la division de masquage sur maksOff afin d'en afficher une autre ultérieurement
• étirer le masque lorsque l'élément est redimensionné
• renvoyez l'élément de masque afin que vous puissiez le styliser, etc.

Le sablier On et le sablier Off peuvent également être utilisés séparément.

// elemOrId - jquery element or element id, defaults to $('<body>')'
// settings.color defaults to 'transparent'
// settings.opacity defaults to 1
// settings.zIndex defaults to 2147483647
// if settings.hourglasss==true change cursor to hourglass over mask
function maskOn(elemOrId, settings) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    var maskDiv=elem.data('maskDiv');
    if (!maskDiv) {
        maskDiv=$('<div style="position:fixed;display:inline"></div>');
        $('body').append(maskDiv);
        elem.data('maskDiv', maskDiv);
    }

    if (typeof settings==='undefined' || settings===null) settings={};
    if (typeof settings.color==='undefined' || settings.color===null) settings.color='transparent';
    if (typeof settings.opacity==='undefined' || settings.opacity===null) settings.opacity=1;
    if (typeof settings.zIndex==='undefined' || settings.zIndex===null) settings.zIndex=2147483647;
    if (typeof settings.hourglass==='undefined' || settings.hourglass===null) settings.hourglass=false;

    // stretch maskdiv over elem
    var offsetParent = elem.offsetParent();
    var widthPercents=elem.outerWidth()*100/offsetParent.outerWidth()+'%';
    var heightPercents=elem.outerHeight()*100/offsetParent.outerHeight()+'%';
    maskDiv.width(widthPercents);
    maskDiv.height(heightPercents);
    maskDiv.offset($(elem).offset());

    // set styles
    maskDiv[0].style.backgroundColor = settings.color;
    maskDiv[0].style.opacity = settings.opacity;
    maskDiv[0].style.zIndex = settings.zIndex;

    if (settings.hourglass) hourglassOn(maskDiv);

    return maskDiv;
}

// elemOrId - jquery element or element id, defaults to $('<body>')'
function maskOff(elemOrId) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    var maskDiv=elem.data('maskDiv');
    if (!maskDiv) {
        console.log('maskOff no mask !');
        return;
    }

    elem.removeData('maskDiv');
    maskDiv.remove();
}

// elemOrId - jquery element or element id, defaults to $('<body>')'
// if decendents is true also shows hourglass over decendents of elemOrId, defaults to true
function hourglassOn(elemOrId, decendents) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    if (typeof decendents==='undefined' || decendents===null) decendents=true;

    if ($('style:contains("hourGlass")').length < 1) $('<style>').text('.hourGlass { cursor: wait !important; }').appendTo('head');
    if ($('style:contains("hourGlassWithDecendents")').length < 1) $('<style>').text('.hourGlassWithDecendents, .hourGlassWithDecendents * { cursor: wait !important; }').appendTo('head');
    elem.addClass(decendents ? 'hourGlassWithDecendents' : 'hourGlass');
}

// elemOrId - jquery element or element id, defaults to $('<body>')'
function hourglassOff(elemOrId) {
    var elem=elemFromParam(elemOrId);
    if (!elem) return;

    elem.removeClass('hourGlass');
    elem.removeClass('hourGlassWithDecendents');
}

function elemFromParam(elemOrId) {
    var elem;
    if (typeof elemOrId==='undefined' || elemOrId===null) 
        elem=$('body');
    else if (typeof elemOrId === 'string' || elemOrId instanceof String) 
        elem=$('#'+elemOrId);
    else
        elem=$(elemOrId);

    if (!elem || elem.length===0) {
        console.log('elemFromParam no element !');
        return null;
    }

    return elem;
}

Avec cela, vous pouvez faire par exemple:

maskOn(); // transparent page mask
maskOn(null, {color:'gray', opacity:0.8}); // gray page mask with opacity
maskOff(); // remove page mask
maskOn(div); // transparent div mask
maskOn(divId, {color:'gray', hourglass:true}); // gray div mask with hourglass
maskOff(div); // remove div mask

voir jsfiddle

function disableItems(divSelector){
    var disableInputs = $(divSelector).find(":input").not("[disabled]");
    disableInputs.attr("data-reenable", true);
    disableInputs.attr("disabled", true);
}

function reEnableItems(divSelector){
    var reenableInputs = $(divSelector).find("[data-reenable]");
    reenableInputs.removeAttr("disabled");
    reenableInputs.removeAttr("data-reenable");
}

Ou utilisez simplement css et une classe "désactivée".
Remarque: n'utilisez pas l'attribut désactivé.
Pas besoin de jouer avec jQuery on / off.
Ceci est beaucoup plus facile et fonctionne sur plusieurs navigateurs:

.disabled{
    position: relative;
}
.disabled:after{
    content: "";
    position: absolute;
    width: 100%;
    height: inherit;
    background-color: rgba(0,0,0,0.1);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Vous pouvez ensuite l'éteindre et l'éteindre lors de l'initialisation de votre page ou du basculement d'un bouton

if(myDiv !== "can be edited"){
    $('div').removeClass('disabled');
} else{
    $('div').addClass('disabled');
}

Une autre façon, dans jQuery, serait d'obtenir la hauteur intérieure, la largeur intérieure et le positionnement du DIV contenant, et simplement de superposer un autre DIV, transparent, par-dessus la même taille. Cela fonctionnera sur tous les éléments à l'intérieur de ce conteneur, au lieu des seules entrées.

N'oubliez pas cependant, avec JS désactivé, vous pourrez toujours utiliser les entrées / contenus DIVs. Il en va de même pour les réponses ci-dessus également.

$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);

Cette solution css uniquement / noscript ajoute une superposition au-dessus d'un champ (ou un div ou tout autre élément), empêchant l'interaction:

fieldset { position: relative; }
fieldset[disabled]::after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: all; background: rgba(128,128,128,0.2); }

Si vous voulez une superposition invisible, c'est-à-dire transparente, définissez l'arrière-plan, par exemple, rgba (128,128,128,0), car cela ne fonctionnera pas sans arrière-plan. Ce qui précède fonctionne pour IE9 +. Le CSS beaucoup plus simple suivant fonctionnera sur IE11 +

[disabled] { pointer-events: none; }

Chrome

Si vous essayez simplement d'empêcher les gens de cliquer et que la sécurité ne vous inquiète pas horriblement - j'ai trouvé un div placé absolu avec un index z de 99999 qui le trie bien. Vous ne pouvez pas cliquer sur le contenu ou y accéder car le div est placé dessus. Peut être un peu plus simple et est une solution CSS uniquement jusqu'à ce que vous deviez la supprimer.

Il existe des bibliothèques javascript configurables qui acceptent une chaîne html ou un élément dom et suppriment les balises et les attributs indésirables. Ceux-ci sont connus comme des désinfectants html . Par exemple:

• DOMPurify
• Insensé
• sanitize-html

Par exemple, dans DOMPurify

DOMPurify.sanitize('<div>abc<iframe//src=jAva&Tab;script:alert(3)>def</div>'); 
// becomes <div>abcdef</div>

EDIT: Ci-dessous, j'ai utilisé la .on()méthode, utilisez plutôt la .bind()méthode

$(this).bind('click', false);
$(this).bind('contextmenu', false);

pour supprimer votre paramètre, vous pouvez utiliser la .unbind()méthode. Alors que la .off()méthode ne fonctionne pas comme prévu.

 $(this).unbind('click', false);
 $(this).unbind('contextmenu', false);

Après avoir recherché des centaines de solutions! apprendre sur les événements de pointeur, voici ce que j'ai fait.

Comme @Kokodoko l'a mentionné dans sa solution qui convient à tous les navigateurs sauf IE. pointer-eventsfonctionne dans IE11 et non dans les versions inférieures. J'ai également remarqué dans IE11 , les événements de pointeur ne fonctionnent pas sur les éléments enfants. Et donc si nous avons quelque chose comme ci-dessous

 <a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>

où span -est l'élément enfant , le réglage pointer-events: nonene fonctionnera pas

Pour surmonter ce problème, j'ai écrit une fonction qui pourrait agir comme des événements de pointeur pour IE et fonctionnera dans les versions inférieures.

Dans le fichier JS

DisablePointerEvents(".DisablePointerEvents");


function DisablePointerEvents(classId) {
    $(classId).each(function () {
        $(this).on('click', false );
        $(this).on('contextmenu', false );
    });
}

Dans un fichier CSS

.DisablePointerEvents{
    pointer-events: none;
    opacity: 0.7;
    cursor: default;
}

En HTML

 <a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>

Cela a simulé le pointer-eventsscénario où ne pointer-eventsfonctionne pas et lorsque la condition ci-dessus des éléments enfants se produit.

JS Fiddle pour le même

https://jsfiddle.net/rpxxrjxh/

la solution simpleset

regarde mon sélecteur

$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);

l' fieldsetUserInfois div contient toutes les entrées que je souhaite désactiver ou activer

j'espère que cela vous aide