Aquí podría ser tu PUBLICIDAD


Cómo deshabilitar todo el contenido div

votos
198

Estaba bajo la suposición 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 obtener todo el contenido deshabilitado también)

Publicado el 12/03/2009 a las 19:07
fuente por usuario juan
En otros idiomas...        العربية       

24 respuestas

votos
302

Muchas de las respuestas anteriores sólo funcionan en los elementos de formulario. Una forma sencilla de desactivar cualquier DIV incluyendo su contenido es simplemente interacción disable ratón. Por ejemplo:

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

css

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}
Respondida el 15/08/2014 a las 03:23
fuente por usuario Kokodoko


Aquí podría ser tu PUBLICIDAD


votos
139

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 ¡Usar jQuery debería ayudarlo!

A partir de jQuery 1.6, debe utilizar en .proplugar de .attrpara deshabilitar.

Respondida el 12/03/2009 a las 07:09
fuente por usuario Martin K.

votos
49

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();
Respondida el 12/03/2009 a las 10:39
fuente por usuario cletus

votos
16

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.

Respondida el 12/03/2009 a las 07:30
fuente por usuario Chris Van Opstal

votos
10

similar a la solución de cletu, pero tengo 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 mí

Respondida el 23/08/2013 a las 03:37
fuente por usuario Kokizzu

votos
9

Aquí está un comentario rápido para las personas que no necesitan un div, pero sólo un blockelement. En HTML5 <fieldset disabled="disabled"></fieldset>tiene el atributo deshabilitado. Cada elemento de formulario en un conjunto de campos con discapacidad se desactiva.

Respondida el 25/11/2016 a las 05:15
fuente por usuario Michael Hächler

votos
8

Se puede utilizar esta declaración CSS fácil de desactivar eventos

#my-div {
    pointer-events:none;
}
Respondida el 06/04/2015 a las 05:03
fuente por usuario Marcio Mazzucato

votos
5

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);
        }
    }
Respondida el 20/02/2013 a las 06:47
fuente por usuario Syed Nasir Abbas

votos
4

controles de entrada HTML pueden ser desactivadas mediante el atributo 'discapacitados' como saben. Una vez que se establece el atributo 'desactivado' para un control de entrada, los controladores de eventos asociados con tal control no se invocan.

Usted tiene que simular el comportamiento anterior para los elementos HTML que no son compatibles 'discapacitados' atribuir como div, si lo desea.

Si usted tiene un div, y desea apoyar clic o un acontecimiento clave en ese div, entonces usted tiene que hacer dos cosas: 1) Cuando se desea desactivar el div, establezca su atributo discapacitados como de costumbre (sólo para cumplir con la convenciones) 2) Haga clic de su div y / o manipuladores de clave, compruebe si el atributo discapacitados se encuentra en el div. Si es así, entonces simplemente ignorar el clic o evento clave (por ejemplo, acaba de regresar de inmediato). Si el atributo discapacitados no se establece, a continuación, hacer clic de su div y / o la lógica evento clave.

pasos anteriores son independientes del navegador también.

Respondida el 30/11/2012 a las 05:29
fuente por usuario Sabinia

votos
2

Una forma de lograrlo es mediante la adición de la hélice con discapacidad a todos los niños de la div. Esto se puede conseguir muy fácilmente:

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

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

De esta manera todo el contenido está desactivada y no se puede hacer clic en ellos, ficha para ellos, desplazarse ellos, etc. Además, no es necesario añadir ningún clases CSS.

Respondida el 17/01/2017 a las 11:13
fuente por usuario Blueriver

votos
2

Esto es para los buscadores,

Lo mejor que hizo es,

$('#myDiv *').attr("disabled", true);                   
$('#myDiv *').fadeTo('slow', .6);
Respondida el 23/06/2016 a las 02:24
fuente por usuario Shree Krishna

votos
2

Pensé en CHIP en un par de notas.

  1. <Div> se puede desactivar en IE8 / 9. Asumo que esto es "incorrecto", y me quité
  2. No utilice .removeProp (), ya que tiene un efecto permanente sobre el elemento. Utilice .prop ( "desactivado", false) en lugar
  3. .. $ ( "# MyDiv") filtro ( "de entrada, área de texto, seleccionar el botón") prop ( "desactivado", true) es más explícito y cogerá algunos elementos de formulario que se pierda con: entrada
Respondida el 13/04/2012 a las 07:51
fuente por usuario Steve11235

votos
1

Como se mencionó en los comentarios, todavía son capaces de acceder elemento navegando entre elementos mediante el uso de la tecla de tabulación. por lo que recomiendo esto:

$("#mydiv")
  .css({"pointer-events" : "none" , "opacity" :  "0.4"})
  .attr("tabindex" , "-1");
Respondida el 09/09/2017 a las 12:55
fuente por usuario Hossein Khalesi

votos
1

A continuación se muestra una solución más completa a divs de enmascaramiento que permite

  • No CSS separada
  • cubrir toda la página o simplemente un elemento
  • especificar el color y la opacidad máscara
  • especifique índice Z para que pueda mostrar ventanas emergentes de más de la máscara
  • mostrar un cursor de reloj de arena sobre la máscara
  • la eliminación de la div enmascaramiento en maksOff así una diferente puede ser mostrado más adelante
  • máscara de estiramiento cuando el elemento de cambio de tamaño
  • devolver el elemento de máscara por lo que puede estilo, etc.

También se incluye hourglassOn y hourglassOff que puede ser utilizado 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 se puede 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

Respondida el 19/11/2015 a las 09:58
fuente por usuario kofifus

votos
1

Cómo desactivar el contenido de un DIV

El CSS pointer-eventspropiedad solos no desactiva los elementos secundarios de desplazamiento, y no es apoyado por IE10 y bajo de elementos DIV (sólo para SVG). http://caniuse.com/#feat=pointer-events

Para desactivar 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 desactivar el contenido de un DIV en todos los navegadores, excepto IE10 y bajo.

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;
}
Respondida el 13/06/2015 a las 07:01
fuente por usuario tfmontague

votos
1

Me gustaría utilizar 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 'desactivado' del elemento.

$('#myDiv *').disable();
Respondida el 27/08/2012 a las 03:44
fuente por usuario koosvdkolk

votos
0
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");
}
Respondida el 08/03/2018 a las 01:40
fuente por usuario Jtbs

votos
0

Si quería mantener la semántica de personas con discapacidad de la siguiente

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

podría añadir el siguiente CSS

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

La ventaja aquí es que usted no está trabajando con las clases en el div que desea trabajar

Respondida el 24/10/2017 a las 12:03
fuente por usuario real_ate

votos
0

la solución SimpleSet

mira mi selector

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

el fieldsetUserInfodiv es decir contiene todas las entradas que quiero discapacitados o Habilitar

Espero que esto te ayude

Respondida el 24/11/2016 a las 06:55
fuente por usuario Basheer AL-MOMANI

votos
0

Si simplemente está tratando de dejar de usuarios que hacen clic y no es terriblemente preocupados por la seguridad - He encontrado un div colocado absoluta con un índice z de 99999 tipo se finos. No puede hacer clic o acceder a cualquiera de los contenidos debido a que el div se coloca sobre ella. Podría ser un poco más simple y es un CSS única solución hasta que usted necesita para eliminarlo.

Respondida el 19/04/2016 a las 08:57
fuente por usuario Ukuser32

votos
0

Este css solamente / noscript solución añade una superposición por encima de un conjunto de campos (o un div o cualquier otro elemento), impidiendo 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 quieres un invisible es decir superposición transparente, establecer el fondo a por ejemplo RGBA (128,128,128,0), ya que no funcionará sin un fondo. Los trabajos anteriores para IE9 +. El siguiente CSS mucho más simple funcionará en IE11 +

[disabled] { pointer-events: none; }

Cromo

Respondida el 09/09/2014 a las 01:41
fuente por usuario Costas

votos
0
$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);
Respondida el 20/09/2013 a las 06:31
fuente por usuario anand

votos
0

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

Recuerde, sin embargo, con JS desactiva, se podrá utilizar el DIVs entradas / contenido. Lo mismo ocurre con las respuestas anteriores también.

Respondida el 15/01/2012 a las 07:44
fuente por usuario TheCarver

votos
-1

EDIT: A continuación he utilizado .on()método, en lugar de utilizar .bind()el método

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

para eliminar la configuración, puede utilizar .unbind()el 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! aprender acerca de puntero-eventos, a continuación es lo que hice.

Como @Kokodoko mencionó en su solución que es apta para todos los navegadores excepto IE. pointer-eventstrabajar en EI11 y no en las versiones inferiores. También me di cuenta de IE11 , puntero-eventos 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 lapso -es el elemento secundario , el establecimiento pointer-events: noneno funcionará

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

En JS Archivo

DisablePointerEvents(".DisablePointerEvents");


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

En CSS Archivo

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

Este simuló el pointer-eventsescenario en el que pointer-eventsno funciona y cuando se produce la condición anterior de elementos secundarios.

JS violín para el mismo

https://jsfiddle.net/rpxxrjxh/

Respondida el 28/06/2016 a las 07:44
fuente por usuario Linet Pereira


Aquí podría ser tu PUBLICIDAD