Comment désactiver tout le contenu div

utilisez un cadre 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 en utilisant jQuery devrait vous aider!

à partir de jQuery 1.6, vous devez utiliser .prop au lieu de .attr pour désactiver.

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

alors vous faites tout simplement:

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

l'attribut disabled ne fait pas partie de la spécification W3C pour DIV elements , seulement pour form elements .

L'approche jQuery suggérée par Martin est le seul moyen infaillible pour y arriver.

voici un petit commentaire pour les gens qui n'ont pas besoin d'un div mais juste d'un blockelement. Dans HTML5 <fieldset disabled="disabled"></fieldset> obtenu l'attribut désactivé. Chaque élément de forme d'un fieldset désactivé est désactivé.

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

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

fonctionne très bien sur moi

vous pouvez utiliser cette simple déclaration 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);
        }
    }

les contrôles D'entrée HTML peuvent être désactivés en utilisant l'attribut "disabled" comme vous le savez. Une fois désactivé attribut pour un contrôle d'entrée est réglé, les gestionnaires d'événements associés à un tel contrôle ne sont pas invoquées.

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

si vous avez une div, et que vous voulez soutenir un clic ou un événement clé sur cette div, alors vous devez faire deux choses: 1) Lorsque vous vous voulez désactiver le div, définissez son attribut disabled comme d'habitude (juste pour se conformer à la convention) 2) dans votre div's click et/ou key handlers, vérifiez si l'attribut disabled est défini sur le div. Si c'est le cas, il suffit de ne pas tenir compte du clic ou de l'événement clé (par exemple, il suffit de retourner immédiatement). Si l'attribut disabled n'est pas défini, faites la logique de clic et/ou d'événement clé de votre div.

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

j'ai pensé ajouter quelques notes.

1. < div > peut être désactivé dans IE8/9. Je suppose que c'est "incorrect", et il m'a jeté
2. ne pas utiliser .removeProp(), car il a un effet permanent sur l'élément. Utiliser. prop("désactivé", false) au lieu de
3. $("#myDiv").filtre("input,textarea,select,le bouton").prop("désactivé", true) est plus explicite et va attraper certains éléments de formulaire vous manquez avec :entrée

C'est pour les chercheurs,

Le meilleur que j'ai fait est de,

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

une façon d'y parvenir est d'ajouter l'hélice désactivée à tous les enfants du div. Vous pouvez y parvenir très facilement:

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

$("#myDiv") trouve le div, .find("*") vous donne tous les noeuds enfant dans tous les niveaux et .prop('disabled', true) désactive chacun.

de Cette façon, tout le contenu est désactivé et vous ne pouvez pas cliquer sur eux, onglet, défilement, etc. De plus, vous n'avez pas besoin d'ajouter de classes css.

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é originale "désactivée" de l'élément.

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

comment désactiver le contenu d'un DIV

CSS pointer-events propriété ne suffit pas de désactiver les éléments enfants de défiler, et il n'est pas soutenu par IE10 et moins pour les éléments DIV (uniquement pour le format SVG). http://caniuse.com/#feat=pointer-events

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;
}

désactiver le contenu D'un DIV sur tous les navigateurs, sauf IE10 et moins.

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;
}

ci-dessous est une solution plus complète pour masquer divs habilitant""

• pas de CSS
• couvrir toute la page ou juste un élément
• spécifier la couleur et l'opacité du masque
• spécifiez z-index pour que vous puissiez afficher des popups sur le masque
• afficher un curseur de sablier sur le masque
• suppression de la div de masquage sur maksOff pour qu'une autre puisse être montrée plus tard
• etirer le masque lors de l'élément de redimensionner
• retourner l'élément de masque pour que vous puissiez le style etc

également inclus est hourglassOn et hourglassOff qui peuvent ê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 ceci 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

comme mentionné dans les commentaires, vous pouvez toujours accéder à l'élément en naviguant entre les éléments en utilisant la touche tab. je recommande donc ceci:

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

Si vous voulez garder la sémantique des handicapés 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 la div que vous voulez travailler avec

une autre façon, en jQuery, serait d'obtenir la hauteur intérieure, la largeur intérieure et le positionnement de la DIV contenant, et simplement superposer une autre DIV, transparent, sur le dessus de la même taille. Cela fonctionne sur tous les éléments à l'intérieur de ce conteneur, au lieu de seulement les entrées.

rappelez-vous cependant, avec JS désactivé, vous serez toujours en mesure d'utiliser les entrées/contenu DIVs. Il en va de même pour les réponses ci-dessus.

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

Cette css/noscript solution ajoute une surcouche au-dessus d'un fieldset (ou un div ou tout autre élément), la prévention de 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 i.e. transparente, définissez l'arrière-plan à e.g. rgba(128,128,128,0), car il ne fonctionnera pas sans arrière-plan. Les travaux ci-dessus pour IE9+. Les css suivants beaucoup plus simples fonctionneront sur IE11+

[disabled] { pointer-events: none; }

Chrome

si vous essayez simplement d'empêcher les gens de cliquer et ne sont pas horriblement inquiet au sujet de la sécurité - j'ai trouvé un absolu placé div avec un z-index de 99999 tri il très bien. Vous ne pouvez pas cliquer ou accéder à n'importe quel contenu parce que le div est placé dessus. Peut - être un peu plus simple et est une solution CSS seulement jusqu'à ce que vous avez besoin de l'enlever.

la solution simpleset

regardez mon sélecteur

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

le fieldsetUserInfo is div contient toutes les entrées que je veux désactiver ou activer

espère que cela vous aide à

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");
}

EDIT: Ci-dessous, j'ai utilisé la méthode .on() , au lieu d'utiliser .bind() méthode

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

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

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

après avoir recherché des centaines de solutions! l'apprentissage sur le pointeur-événements, voici ce que j'ai fait.

comme @Kokodoko mentionné dans sa solution qui est adapté pour tous les navigateurs sauf IE. pointer-events travail IE11 et non pas dans les versions inférieures. J'ai également remarqué dans IE11 , pointeur-événements ne fonctionnent pas sur les éléments enfant. 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 , pointer-events: none ne marchera pas

Pour surmonter ce problème, j'ai écrit un fonction qui pourrait agir comme pointeur-événements 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 le fichier CSS

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

HTML

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

cela simulait le scénario pointer-events où pointer-events ne fonctionne pas et quand la condition ci-dessus des éléments enfants se produisent.

JS Fiddle pour la même

https://jsfiddle.net/rpxxrjxh /