Cómo deshabilitar todo el contenido div

Estaba bajo la suposition de que si deshabilitaba un div, todo el contenido también se deshabilitaba.

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

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

Muchas de las respuestas anteriores solo funcionan en elementos de formulario. Una forma sencilla de desactivar cualquier DIV, incluido su contenido, es simplemente 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 input en un bloque Div ¡Usar jQuery debería ayudarlo!

A partir de jQuery 1.6, debe usar .prop lugar de .attr para deshabilitar.

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 attributes directamente.

Entonces simplemente haces:

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

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

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

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

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

me funciona bien

Puede usar esta simple statement de CSS para deshabilitar events

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

Aquí hay un comentario rápido para las personas que no necesitan un div sino solo un locking. En HTML5 <fieldset disabled="disabled"></fieldset> obtuvo el atributo disabled. Todos los elementos de formulario en un fieldset deshabilitado están deshabilitados.

Los browseres probaron: 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); } } 

Los controles de input de HTML se pueden deshabilitar usando el atributo "deshabilitado" como ya sabe. Una vez que se establece el atributo "deshabilitado" para un control de input, no se invocan los controlleres de events asociados con dicho control.

Tienes que simular el comportamiento anterior para los elementos HTML que no admiten el atributo 'disabled' como div, si lo deseas.

Si tiene un div y desea dar soporte a un clic o a un evento key en ese div, debe hacer dos cosas: 1) Cuando quiera deshabilitar el div, establezca su atributo desactivado como siempre (solo para cumplir con el convención) 2) En los controlleres de clic y / o tecla de su div, compruebe si el atributo desactivado está establecido en el div. Si es así, simplemente ignore el clic o el evento key (por ejemplo, simplemente devuelva inmediatamente). Si el atributo desactivado no está configurado, entonces click su div y / o lógica de evento key.

Los pasos anteriores también son independientes del browser.

Pensé en ingresar un par de notas.

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

Esto es para los buscadores,

Lo mejor que hice fue:

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

Usaría una versión mejorada de la function 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 'disabled' del elemento.

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

Cómo deshabilitar los contenidos de un DIV

La propiedad de pointer-events CSS por sí sola no deshabilita el desplazamiento de los elementos secundarios, y IE10 y la versión anterior no los admite para elementos DIV (solo para SVG). http://caniuse.com/#feat=pointer-events

Para deshabilitar los contenidos de un DIV en todos los browseres.

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 los contenidos de un DIV en todos los browseres, excepto IE10 y less.

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 por separado
  • cubre toda la página o solo un elemento
  • especificar el color y la opacidad de la máscara
  • Especifique el índice Z para que pueda mostrar windows emergentes sobre la máscara
  • mostrar un cursor de reloj de arena sobre la máscara
  • eliminando el div de enmascaramiento en maksOff para que se muestre uno diferente más tarde
  • máscara de estiramiento cuando el tamaño del elemento
  • devuelve el elemento de máscara para que puedas darle estilo, 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

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

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

$("#myDiv") encuentra que div, .find("*") te da todos los nodos secundarios en todos los niveles y .prop('disabled', true) deshabilita cada uno.

De esta forma, se deshabilita todo el contenido y no se puede hacer clic en ellos, tabularlos, desplazarlos, etc. Además, no es necesario agregar ninguna class de CSS.

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

Sin embargo, recuerde que, con JS deshabilitado, aún podrá usar las inputs / 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 superposition sobre un fieldset (o un div o cualquier otro elemento), lo que impide 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 superposition invisible, es decir, transparente, configure el background como, por ejemplo, rgba (128,128,128,0), ya que no funcionará sin un background. 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 security, he encontrado que un div colocado absoluto con un índice Z de 99999 es muy bueno. No puede hacer clic o acceder a ningún contenido porque el div se coloca sobre él. Puede ser un poco más simple y es una solución CSS única hasta que necesite eliminarla.

la solución más simple

mira mi selector

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

el fieldsetUserInfo es div contiene todas las inputs que quiero deshabilitar o habilitar

Espero que esto te ayude

Como se mencionó en los comentarios, aún puede acceder al elemento navegando entre elementos usando la tecla de tabulación. entonces yo recomiendo esto:

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

Si quería mantener la semántica de las discapacidades de la siguiente manera

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

podrías agregar el siguiente CSS

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

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

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

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

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

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

¡Después de investigar cientos de soluciones! aprendiendo acerca de los events de puntero, a continuación se muestra lo que hice.

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

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

donde span -es el elemento secundario , configuration de pointer-events: none no funciona

Para superar este problema, escribí una function que podría actuar como puntero-events para IE y funcionará en las versiones inferiores.

En file JS

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

En file 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 simuló el escenario de pointer-events pointer-events donde pointer-events no funcionan y cuando se produce la condición anterior de elementos secundarios.

JS Fiddle por el mismo

https://jsfiddle.net/rpxxrjxh/