So deaktivieren Sie alle div-Inhalte

Ich ging davon aus, dass, wenn ich ein Div deaktivierte, auch alle Inhalte deaktiviert wurden.

Der Inhalt ist jedoch grau, aber ich kann trotzdem damit interagieren.

Gibt es eine Möglichkeit, das zu tun? (Deaktiviere ein Div und deaktiviere auch alle Inhalte)

Viele der obigen Antworten funktionieren nur für Formularelemente. Eine einfache Möglichkeit, ein DIV einschließlich seines Inhalts zu deaktivieren, besteht darin, nur die Mausinteraktion zu deaktivieren. Beispielsweise:

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

CSS

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

Verwenden Sie ein Framework wie JQuery, um Folgendes zu tun:

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

Das Deaktivieren und Aktivieren von Eingabeelementen in einem Div-Block mit jQuery sollte Ihnen helfen!

Ab jQuery 1.6 sollten Sie .propanstelle von .attrzum Deaktivieren verwenden.

Ich wollte nur diese Erweiterungsmethode zum Aktivieren und Deaktivieren von Elementen erwähnen . Ich denke, es ist viel sauberer als das direkte Hinzufügen und Entfernen von Attributen.

Dann machst du einfach:

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

Hier ist ein kurzer Kommentar für Leute, die kein div, sondern nur ein Blockelement benötigen. In HTML5 <fieldset disabled="disabled"></fieldset>wurde das Attribut deaktiviert. Jedes Formularelement in einem deaktivierten Feldsatz ist deaktiviert.

Das Attribut disabled ist nicht Teil der W3C-Spezifikation für DIV-Elemente , sondern nur für Formularelemente .

Der von Martin vorgeschlagene jQuery-Ansatz ist der einzige narrensichere Weg, dies zu erreichen.

Ähnlich wie bei Cletus Lösung, aber bei der Verwendung dieser Lösung ist ein Fehler aufgetreten. Dies ist die Problemumgehung:

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

funktioniert gut bei mir

Mit dieser einfachen CSS-Anweisung können Sie Ereignisse deaktivieren

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

Getestete Browser: IE 9, Chrome, Firefox und 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);
        }
    }

Wie Sie wissen, können HTML-Eingabesteuerelemente mithilfe des Attributs 'disabled' deaktiviert werden. Sobald das Attribut 'disabled' für ein Eingabesteuerelement festgelegt wurde, werden die mit diesem Steuerelement verknüpften Ereignishandler nicht mehr aufgerufen.

Sie müssen das obige Verhalten für HTML-Elemente simulieren, die das Attribut 'disabled' wie div nicht unterstützen, wenn Sie dies wünschen.

Wenn Sie ein Div haben und das Klicken oder ein Schlüsselereignis für dieses Div unterstützen möchten, müssen Sie zwei Dinge tun: 1) Wenn Sie das Div deaktivieren möchten, setzen Sie sein deaktiviertes Attribut wie gewohnt (nur um das zu erfüllen) Konvention) 2) Überprüfen Sie in den Klick- und / oder Schlüsselhandlern Ihres Divs, ob das Attribut deaktiviert für das Div festgelegt ist. Wenn dies der Fall ist, ignorieren Sie einfach das Klick- oder Schlüsselereignis (z. B. kehren Sie sofort zurück). Wenn das Attribut disabled nicht festgelegt ist, führen Sie die Klick- und / oder Schlüsselereignislogik Ihres Div aus.

Die obigen Schritte sind ebenfalls browserunabhängig.

Eine Möglichkeit, dies zu erreichen, besteht darin, allen Kindern des Div die behinderte Requisite hinzuzufügen. Sie können dies sehr leicht erreichen:

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

$("#myDiv")Findet das Div, .find("*")ruft alle untergeordneten Knoten in allen Ebenen ab und .prop('disabled', true)deaktiviert jeden einzelnen.

Auf diese Weise werden alle Inhalte deaktiviert und Sie können nicht darauf klicken, zu ihnen navigieren, sie scrollen usw. Außerdem müssen Sie keine CSS-Klassen hinzufügen.

Wickeln Sie das divin ein fieldsetTag ein:

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

Ich dachte, ich würde ein paar Notizen einspielen.

1. <div> kann in IE8 / 9 deaktiviert werden. Ich nehme an, das ist "falsch" und es hat mich umgehauen
2. Verwenden Sie nicht .removeProp (), da dies einen dauerhaften Einfluss auf das Element hat. Verwenden Sie stattdessen .prop ("deaktiviert", false)
3. $ ("# myDiv"). filter ("Eingabe, Textbereich, Auswahl, Schaltfläche"). prop ("deaktiviert", true) ist expliziter und fängt einige Formularelemente ab, die Sie vermissen würden: Eingabe

Dies ist für die Suchenden,

Das Beste, was ich getan habe, ist:

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

Wie in den Kommentaren erwähnt, können Sie weiterhin auf Elemente zugreifen, indem Sie mithilfe der Tabulatortaste zwischen den Elementen navigieren. also empfehle ich folgendes:

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

Wenn Sie die Semantik von deaktiviert wie folgt beibehalten möchten

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

Sie können das folgende CSS hinzufügen

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

Der Vorteil hierbei ist, dass Sie nicht mit Klassen auf dem Div arbeiten, mit dem Sie arbeiten möchten

Ich würde eine verbesserte Version von Cletus 'Funktion verwenden:

 $.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');
      }
    });
};

Hiermit wird die ursprüngliche Eigenschaft 'disabled' des Elements gespeichert.

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

So deaktivieren Sie den Inhalt eines DIV

Die CSS- pointer-eventsEigenschaft allein verhindert nicht, dass untergeordnete Elemente gescrollt werden, und wird von IE10 und darunter für DIV-Elemente nicht unterstützt (nur für SVG). http://caniuse.com/#feat=pointer-events

So deaktivieren Sie den Inhalt eines DIV in allen Browsern.

Javascript:

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

CSS:

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

So deaktivieren Sie den Inhalt eines DIV in allen Browsern außer IE10 und darunter.

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

Im Folgenden finden Sie eine umfassendere Lösung zum Aktivieren der Aktivierung von Divs

• kein separates CSS
• die ganze Seite oder nur ein Element abdecken
• Geben Sie die Maskenfarbe und die Deckkraft an
• Geben Sie den Z-Index an, damit Sie Popups über der Maske anzeigen können
• Zeigen Sie einen Sanduhr-Cursor über der Maske
• Entfernen des Maskierungsbereichs auf maksOff, damit später ein anderer angezeigt werden kann
• Dehnungsmaske, wenn die Größe des Elements geändert wird
• Geben Sie das Maskenelement zurück, damit Sie es usw. formatieren können

Ebenfalls enthalten sind SanduhrOn und SanduhrOff, die separat verwendet werden können

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

Damit können Sie zum Beispiel:

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

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

Oder verwenden Sie einfach CSS und eine "deaktivierte" Klasse.
Hinweis: Verwenden Sie nicht das Attribut disabled.
Sie müssen sich nicht mit jQuery ein- und ausschalten.
Dies ist viel einfacher und funktioniert browserübergreifend:

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

Anschließend können Sie es beim Initialisieren Ihrer Seite oder beim Umschalten einer Schaltfläche ein- und ausschalten

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

Eine andere Möglichkeit in jQuery wäre, die innere Höhe, innere Breite und Position des enthaltenen DIV zu ermitteln und einfach einen anderen transparenten DIV über die gleiche Größe zu legen. Dies funktioniert für alle Elemente in diesem Container anstatt nur für die Eingaben.

Denken Sie jedoch daran, dass Sie bei deaktiviertem JS weiterhin die Eingaben / Inhalte der DIVs verwenden können. Gleiches gilt auch für die obigen Antworten.

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

Diese Nur-CSS / Noscript-Lösung fügt eine Überlagerung über einer Feldmenge (oder einem Div oder einem anderen Element) hinzu, um Interaktionen zu verhindern:

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

Wenn Sie eine unsichtbare, dh transparente Überlagerung wünschen, setzen Sie den Hintergrund auf z. B. rgba (128,128,128,0), da dies ohne Hintergrund nicht funktioniert. Das obige funktioniert für IE9 +. Das folgende viel einfachere CSS funktioniert unter IE11 +

[disabled] { pointer-events: none; }

Chrom

Wenn Sie einfach versuchen, das Klicken von Personen zu stoppen, und sich keine schrecklichen Sorgen um die Sicherheit machen, habe ich ein absolut platziertes Div mit einem Z-Index von 99999 gefunden. Sie können auf keinen Inhalt klicken oder darauf zugreifen, da das div darüber platziert ist. Könnte etwas einfacher sein und ist eine reine CSS-Lösung, bis Sie sie entfernen müssen.

Es gibt konfigurierbare Javascript-Bibliotheken, die eine HTML-Zeichenfolge oder ein Dom-Element aufnehmen und unerwünschte Tags und Attribute entfernen. Diese sind bekannt als HTML-Desinfektionsmittel bezeichnet . Zum Beispiel:

• DOMPurify
• Wahnsinnig
• sanitize-html

ZB in DOMPurify

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

EDIT: Unten habe ich .on()Methode verwendet, stattdessen .bind()Methode verwenden

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

Um Ihre Einstellung zu entfernen, können Sie die .unbind()Methode verwenden. Während die .off()Methode nicht wie erwartet funktioniert.

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

Nach der Erforschung von Hunderten von Lösungen! Im Folgenden habe ich etwas über Zeigerereignisse gelernt.

Wie @Kokodoko in seiner Lösung erwähnte, die für alle Browser außer IE geeignet ist. pointer-eventsarbeiten in IE11 und nicht in den niedrigeren Versionen. Ich habe auch in IE11 festgestellt , dass Zeigerereignisse bei den untergeordneten Elementen nicht funktionieren. Und daher, wenn wir so etwas wie unten haben

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

Wo span -ist das untergeordnete Element ist , pointer-events: nonefunktioniert die Einstellung nicht

Um dieses Problem zu lösen, habe ich eine Funktion geschrieben, die als Zeigerereignisse für den IE fungieren kann und in den niedrigeren Versionen funktioniert.

In der JS-Datei

DisablePointerEvents(".DisablePointerEvents");


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

In der CSS-Datei

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

In HTML

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

Dies fälschte das pointer-eventsSzenario wopointer-events nicht funktioniert und in dem die oben genannten Bedingungen für untergeordnete Elemente auftreten.

JS Fiddle für das gleiche

https://jsfiddle.net/rpxxrjxh/

die simpleset Lösung

Schau dir meinen Selektor an

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

Das fieldsetUserInfois div enthält alle Eingänge, die ich deaktivieren oder aktivieren möchte

hoffe das hilft dir