HTML-Element auf der Client-Seite deaktivieren (Javascript)

Question

Ich suche nach der einfachsten Möglichkeit, ein ganzes HTML-Element zu deaktivieren (typischerweise ein <div> ).

Mit "deaktivieren" meine ich eine Möglichkeit, den Benutzer daran zu hindern, auf eines der in dem Element enthaltenen Elemente zu klicken. Zum Beispiel, wenn Sie ein Formular in das deaktivierte Element haben, werden die Formular-Elemente nicht den Fokus zu fangen. Ich habe es mit einer Methode versucht, die das DOM durchläuft und jedes Element deaktiviert, das sie findet. Es funktioniert, aber es scheint zu komplex, und ich bin auf der Suche nach einer einfacheren Methode, etwas wie $("#mydiv").disable()

Ich möchte verhindern, dass der Benutzer andere Ereignisse wie onmouseover, etc. auslösen und sogar verhindern, dass der Benutzer auswählen und ändern Elemente mit der Tastatur. Vielleicht eine Art halbtransparentes Overlay, das das gesamte zu deaktivierende Element abdeckt, könnte den Trick machen.

Ist das möglich mit jQuery oder kennen Sie eine einfache Möglichkeit, es mit einfachen JS zu implementieren?

Answer 1

El jQuery-Plugin BlockUI ist eine gute Möglichkeit, dies zu erreichen.

Answer 2

Etwas in der Art von :

$("#mydiv").find("input").attr('disabled','disabled');

Diese findet grundsätzlich alle input Elemente im myDiv-Element und schaltet sie aus.

Answer 3

Dies ist die DOM-Traversal-Methode, aber sie ist nicht so kompliziert:

$('#mydiv').find('input').attr('disabled','true');
$('#mydiv *').unbind();

Answer 4

Wie wäre es mit einem Div über dem deaktivierten Div?

<style>

    div.disableall { filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25; background-color: black; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 500; /* just preventing */ }

</style>

Und fügen Sie zu dem Div hinzu, das Sie deaktivieren möchten:

<script type="text/javascript">
    var disable = document.createElement("div");
    disable.className = 'disableall';
    document.getElementById('mydiv').appendChild(disable);
</script>  

Ich denke, das sollte funktionieren.

ps: Sie sollten den z-index entsprechend Ihren Bedürfnissen anpassen

Answer 5

Was mir auf Anhieb einfällt, ist, entweder ein durchsichtiges Div zu verwenden, das über dem alten Inhalt schwebt (mit CSS-Optionen wie " position: relative " und " top: -123px ") oder das Hinzufügen von READONLY in Ihre Formulare und Schaltflächen.

Aber egal, für welchen Weg Sie sich entscheiden, denken Sie daran, dass diese Änderungen nur für die Kunden gelten. Sowohl JavaScript als auch HTML und CSS können zur Laufzeit sehr leicht geändert werden. Seien Sie also auf solche Dinge auch auf der Serverseite vorbereitet.