Como desativar todo o conteúdo div

Eu estava no pressuposto de que, se eu desabilitasse uma div, todo o conteúdo também seria desabilitado.

No entanto, o conteúdo está acinzentado, mas ainda posso interagir com ele.

Existe uma maneira de fazer isso? (desabilite uma div e desative também todo o conteúdo)

Muitas das respostas acima funcionam apenas em elementos de formulário. Uma maneira simples de desativar qualquer DIV, incluindo seu conteúdo, é simplesmente desativar a interação do mouse. Por exemplo:

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

css

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

Use uma estrutura como o JQuery para fazer coisas como:

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

Desativar e ativar elementos de entrada em um bloco div O uso do jQuery deve ajudá-lo!

A partir do jQuery 1.6, você deve usar em .propvez de .attrdesativar.

Eu só queria mencionar esse método de extensão para ativar e desativar elementos . Eu acho que é uma maneira muito mais limpa do que adicionar e remover atributos diretamente.

Então você simplesmente faz:

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

Aqui está um comentário rápido para pessoas que não precisam de uma div, mas apenas de um bloqueio. No HTML5, <fieldset disabled="disabled"></fieldset>obtive o atributo desativado. Todo elemento de formulário em um conjunto de campos desabilitado está desabilitado.

O atributo desativado não faz parte da especificação W3C para elementos DIV , apenas para elementos de formulário .

A abordagem do jQuery sugerida por Martin é a única maneira infalível de fazer isso.

semelhante à solução do cletu, mas recebi um erro ao usar essa solução, esta é a solução alternativa:

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

funciona bem em mim

Você pode usar esta instrução CSS simples para desativar eventos

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

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

Os controles de entrada HTML podem ser desativados usando o atributo 'disabled' como você sabe. Depois que o atributo 'desativado' para um controle de entrada é definido, os manipuladores de eventos associados a esse controle não são chamados.

Você deve simular o comportamento acima para elementos HTML que não suportam o atributo 'disabled' como div, se desejar.

Se você tem uma div e deseja dar suporte ao clique ou a um evento-chave nessa div, é necessário fazer duas coisas: 1) Quando quiser desativar a div, defina seu atributo desativado como de costume (apenas para cumprir com o convenção) 2) Nos manipuladores de cliques e / ou chaves de sua div, verifique se o atributo desativado está definido na div. Se for, desconsidere o evento de clique ou chave (por exemplo, retorne imediatamente). Se o atributo desativado não estiver definido, faça o clique do div e / ou a lógica do evento principal.

As etapas acima também são independentes do navegador.

Uma maneira de conseguir isso é adicionando o suporte desativado a todos os filhos da div. Você pode conseguir isso com muita facilidade:

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

$("#myDiv")encontra a div, .find("*")obtém todos os nós filhos em todos os níveis e .prop('disabled', true)desativa cada um.

Dessa forma, todo o conteúdo está desabilitado e você não pode clicar neles, separá-los, rolar-los, etc. Além disso, você não precisa adicionar nenhuma classe css.

Coloque a tag divdentro de uma fieldsettag:

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

Pensei em fazer algumas anotações.

1. <div> pode ser desativado no IE8 / 9. Eu suponho que isso esteja "incorreto" e isso me assustou
2. Não use .removeProp (), pois isso afeta permanentemente o elemento. Use .prop ("desativado", falso) em vez disso
3. $ ("# myDiv"). filter ("input, textarea, select, button"). prop ("disabled", true) é mais explícito e captura alguns elementos do formulário que você perderia: input

Isto é para os pesquisadores,

O melhor que fiz é,

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

Conforme mencionado nos comentários, você ainda pode acessar o elemento navegando entre os elementos usando a tecla tab. então eu recomendo isso:

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

Se você deseja manter a semântica de desativado da seguinte maneira

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

você pode adicionar o seguinte CSS

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

o benefício aqui é que você não está trabalhando com classes na div com a qual deseja trabalhar

Eu usaria uma versão aprimorada da função 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 armazena a propriedade 'desativada' original do elemento.

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

Como desativar o conteúdo de um DIV

A pointer-eventspropriedade CSS sozinha não desabilita a rolagem de elementos filho e não é suportada pelo IE10 e inferior para elementos DIV (apenas para SVG). http://caniuse.com/#feat=pointer-events

Para desativar o conteúdo de um DIV em todos os 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 desativar o conteúdo de um DIV em todos os navegadores, exceto IE10 e inferiores.

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

Abaixo está uma solução mais abrangente para mascarar divs, permitindo

• nenhum CSS separado
• cobrir a página inteira ou apenas um elemento
• especificar cor e opacidade da máscara
• especifique o índice Z para poder exibir pop-ups sobre a máscara
• mostra um cursor de ampulheta sobre a máscara
• removendo a div de mascaramento em maksOff para que uma diferente possa ser mostrada mais tarde
• esticar a máscara quando o elemento é redimensionado
• retorne o elemento mask para que você possa estilizá-lo etc.

Também está incluída a ampulheta On e a ampulheta Off, que podem ser usadas separadamente

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

Com isso, você pode fazer, por exemplo:

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

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

Ou apenas use css e uma classe "disabled".
Nota: não use o atributo desativado.
Não é necessário mexer no jQuery.
Isso é muito mais fácil e funciona em vários 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;
}

Em seguida, você pode desligá-lo ao inicializar sua página ou alternar um botão

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

Outra maneira, no jQuery, seria obter a altura interna, a largura interna e o posicionamento da DIV contida e simplesmente sobrepor outra DIV, transparente, por cima do topo do mesmo tamanho. Isso funcionará em todos os elementos dentro desse contêiner, em vez de apenas nas entradas.

Lembre-se, porém, com o JS desativado, você ainda poderá usar as entradas / conteúdo dos DIVs. O mesmo acontece com as respostas acima também.

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

Esta solução somente CSS / noscript adiciona uma sobreposição acima de um conjunto de campos (ou uma div ou qualquer outro elemento), impedindo a interação:

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

Se você deseja uma sobreposição invisível, ou seja, transparente, defina o plano de fundo como, por exemplo, rgba (128,128,128,0), pois não funcionará sem um plano de fundo. O acima funciona para o IE9 +. O seguinte css muito mais simples funcionará no IE11 +

[disabled] { pointer-events: none; }

cromada

Se você está simplesmente tentando impedir que as pessoas cliquem e não está terrivelmente preocupado com a segurança - eu encontrei uma div absoluta com um índice z de 99999 classifica tudo bem. Você não pode clicar ou acessar qualquer conteúdo porque a div é colocada sobre ele. Pode ser um pouco mais simples e é uma solução apenas de CSS até que você precise removê-lo.

Existem bibliotecas javascript configuráveis ​​que recebem uma string html ou um elemento dom e eliminam tags e atributos indesejados. Estes são conhecidos como higienizadores html . Por exemplo:

• DOMPurify
• Insano
• higienizar-html

Por exemplo, no DOMPurify

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

EDIT: Abaixo eu usei o .on()método, em vez usar o .bind()método

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

para remover sua configuração, você pode usar o .unbind()método Considerando que o .off()método não funciona como esperado.

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

Depois de pesquisar centenas de soluções! aprendendo sobre eventos-ponteiro, abaixo está o que eu fiz.

Como @Kokodoko mencionou em sua solução, que é adequado para todos os navegadores, exceto o IE. pointer-eventsfunciona no IE11 e não nas versões inferiores. Também notei no IE11 , eventos de ponteiro não funcionam nos elementos filho. E, portanto, se tivermos algo como abaixo

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

onde span -é o elemento filho , a configuração pointer-events: nonenão funcionará

Para superar esse problema, escrevi uma função que poderia atuar como eventos-ponteiro para o IE e funcionará nas versões inferiores.

No arquivo JS

DisablePointerEvents(".DisablePointerEvents");


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

No arquivo CSS

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

Em HTML

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

Isso falsificou o pointer-eventscenário em que pointer-eventsnão funciona e quando a condição acima dos elementos filho ocorre.

JS Fiddle pela mesma

https://jsfiddle.net/rpxxrjxh/

a solução simpleset

olhe para o meu seletor

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

o fieldsetUserInfois div contém todas as entradas que eu quero desabilitar ou habilitar

Espero que isso ajude você