Cómo deshabilitar todo el contenido div

Supuse que si deshabilitaba un div, todo el contenido también se deshabilitaba.

Sin embargo, el contenido está en gris pero aún puedo interactuar con él.

¿Hay una manera de hacer eso? (deshabilite un div y obtenga todo el contenido deshabilitado también)

Muchas de las respuestas anteriores solo funcionan en elementos de formulario. Una manera simple de deshabilitar cualquier DIV, incluido su contenido, es deshabilitar la interacción del mouse. Por ejemplo:

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

css

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

Use un marco como JQuery para hacer cosas como:

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

Deshabilitar y habilitar elementos de entrada en un bloque div usando jQuery debería ayudarte!

A partir de jQuery 1.6, debe usarlo en .proplugar de .attrdesactivarlo.

Solo quería mencionar este método de extensión para habilitar y deshabilitar elementos . Creo que es una forma mucho más limpia que agregar y eliminar atributos directamente.

Entonces simplemente haces:

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

Aquí hay un comentario rápido para las personas que no necesitan un div sino solo un elemento de bloque. En HTML5 <fieldset disabled="disabled"></fieldset>obtuve el atributo deshabilitado. Cada elemento de formulario en un conjunto de campos deshabilitado está deshabilitado.

El atributo deshabilitado no es parte de la especificación W3C para elementos DIV , solo para elementos de formulario .

El enfoque jQuery sugerido por Martin es la única forma infalible de lograrlo.

similar a la solución de cletu, pero recibí un error al usar esa solución, esta es la solución:

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

funciona bien en mi

Puede usar esta simple declaración CSS para deshabilitar eventos

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

Navegadores probados: IE 9, Chrome, Firefox y 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);
        }
    }

Una forma de lograr esto es agregando el accesorio deshabilitado a todos los hijos del div. Puede lograr esto muy fácilmente:

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

$("#myDiv")encuentra el div, .find("*")obtiene todos los nodos secundarios en todos los niveles y .prop('disabled', true)desactiva cada uno.

De esta manera, todo el contenido está deshabilitado y no puede hacer clic en ellos, tabularlos, desplazarlos, etc. Además, no necesita agregar ninguna clase de CSS.

Los controles de entrada HTML se pueden deshabilitar usando el atributo 'deshabilitado' como ya sabe. Una vez que se establece el atributo 'deshabilitado' para un control de entrada, no se invocan los controladores de eventos asociados con dicho control.

Debe simular el comportamiento anterior para los elementos HTML que no admiten el atributo 'deshabilitado' como div, si lo desea.

Si tiene un div y desea admitir un clic o un evento clave en ese div, debe hacer dos cosas: 1) Cuando desee deshabilitar el div, establezca su atributo deshabilitado como de costumbre (solo para cumplir con el convención) 2) En los controladores de clic y / o clave de su div, verifique si el atributo deshabilitado está configurado en el div. Si es así, simplemente ignore el clic o el evento clave (por ejemplo, simplemente regrese de inmediato). Si el atributo deshabilitado no está configurado, haga clic en su div y / o lógica de evento clave.

Los pasos anteriores son independientes del navegador también.

Envuelva el divdentro de una fieldsetetiqueta:

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

Pensé que añadiría un par de notas.

1. <div> se puede deshabilitar en IE8 / 9. Supongo que esto es "incorrecto", y me arrojó
2. No use .removeProp (), ya que tiene un efecto permanente en el elemento. Utilice .prop ("deshabilitado", falso) en su lugar
3. $ ("# myDiv"). filter ("input, textarea, select, button"). prop ("disabled", true) es más explícito y capturará algunos elementos de formulario con los que se perdería: input

Esto es para los buscadores,

Lo mejor que hice es

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

Como se mencionó en los comentarios, aún puede acceder al elemento navegando entre los elementos utilizando la tecla de tabulación. así que recomiendo esto:

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

Si desea mantener la semántica de discapacitados de la siguiente manera

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

puedes agregar el siguiente CSS

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

el beneficio aquí es que no estás trabajando con clases en el div con el que quieres trabajar

Usaría una versión mejorada de la función 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');
      }
    });
};

Que almacena la propiedad original 'deshabilitada' del elemento.

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

Cómo deshabilitar el contenido de un DIV

La pointer-eventspropiedad CSS por sí sola no deshabilita el desplazamiento de los elementos secundarios, y no es compatible con IE10 y bajo para los elementos DIV (solo para SVG). http://caniuse.com/#feat=pointer-events

Para deshabilitar el contenido de un DIV en todos los navegadores.

Javascript:

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

Css:

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

Para deshabilitar el contenido de un DIV en todos los navegadores, excepto IE10 y menos.

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

A continuación se muestra una solución más completa para enmascarar divs que permite

• sin CSS separado
• cubrir toda la página o solo un elemento
• especificar color de máscara y opacidad
• especifique el índice Z para que pueda mostrar ventanas emergentes sobre la máscara
• muestra un cursor de reloj de arena sobre la máscara
• eliminar el enmascaramiento div en maksOff para que se pueda mostrar uno diferente más adelante
• estirar la máscara cuando el elemento cambia de tamaño
• devuelve el elemento de máscara para que puedas peinarlo, etc.

También se incluye hourglassOn y hourglassOff que se pueden usar por separado

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

Con esto puedes hacer por ejemplo:

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

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

O simplemente use css y una clase "deshabilitada".
Nota: no use el atributo deshabilitado.
No es necesario meterse con jQuery activado / desactivado.
Esto es mucho más fácil y funciona en varios navegadores:

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

Luego puede apagarlo y encenderlo al inicializar su página, o al alternar un botón

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

Otra forma, en jQuery, sería obtener la altura interna, el ancho interno y el posicionamiento del DIV que contiene, y simplemente superponer otro DIV, transparente, sobre la parte superior del mismo tamaño. Esto funcionará en todos los elementos dentro de ese contenedor, en lugar de solo las entradas.

Sin embargo, recuerde que con JS deshabilitado, aún podrá usar las entradas / contenido de DIV. Lo mismo ocurre con las respuestas anteriores también.

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

Esta solución css only / noscript agrega una superposición sobre un conjunto de campos (o un div o cualquier otro elemento), evitando la interacción:

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 desea una superposición invisible, es decir, transparente, establezca el fondo en, por ejemplo, rgba (128,128,128,0), ya que no funcionará sin un fondo. Lo anterior funciona para IE9 +. El siguiente CSS mucho más simple funcionará en IE11 +

[disabled] { pointer-events: none; }

Cromo

Si simplemente está tratando de evitar que la gente haga clic y no esté terriblemente preocupado por la seguridad, he encontrado que un div colocado con un índice z de 99999 lo ordena muy bien. No puede hacer clic ni acceder a ninguno de los contenidos porque el div está colocado encima. Puede ser un poco más simple y es una solución solo CSS hasta que necesite eliminarlo.

Hay bibliotecas de JavaScript configurables que toman una cadena html o un elemento dom y eliminan las etiquetas y atributos no deseados. Estos se conocen como desinfectantes html . Por ejemplo:

• DOMPurificar
• Insano
• sanitize-html

Por ejemplo, en DOMPurify

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

EDITAR: a continuación he usado el .on()método, en su lugar, use el .bind()método

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

para eliminar su configuración, puede usar el .unbind()método. Mientras que el .off()método no funciona como se esperaba.

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

¡Después de investigar cientos de soluciones! aprendiendo sobre eventos de puntero, a continuación es lo que hice.

Como @Kokodoko mencionó en su solución, que es apta para todos los navegadores, excepto IE. pointer-eventsfunciona en IE11 y no en las versiones inferiores. También noté en IE11 , los eventos de puntero no funcionan en los elementos secundarios. Y por lo tanto si tenemos algo como abajo

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

donde span -es el elemento hijo , la configuración pointer-events: noneno funcionará

Para superar este problema, escribí una función que podría actuar como eventos de puntero para IE y funcionará en las versiones inferiores.

En el archivo JS

DisablePointerEvents(".DisablePointerEvents");


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

En archivo 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>

Esto falsificó el pointer-eventsescenario donde pointer-eventsno funciona y cuando se produce la condición anterior de elementos secundarios.

JS Fiddle por lo mismo

https://jsfiddle.net/rpxxrjxh/

la solución más simple

mira mi selector

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

el fieldsetUserInfose div contiene todas las entradas que quiero discapacitados o Habilitar

Espero que esto te ayude