How to disable all div content

问题:

I was under the assumption that if I disabled a div, all content got disabled too.

However, the content is grayed but I can still interact with it.

Is there a way to do that? (disable a div and get all content disabled also)

回答1:

Many of the above answers only work on form elements. A simple way to disable any DIV including its contents is to just disable mouse interaction. For example:

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

css

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

回答2:

Use a framework like JQuery to do things like:

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

Disable And Enable Input Elements In A Div Block Using jQuery should help you!

As of jQuery 1.6, you should use .prop instead of .attr for disabling.

回答3:

I just wanted to mention this extension method for enabling and disabling elements. I think it\'s a much cleaner way than adding and removing attributes directly.

Then you simply do:

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

回答4:

The disabled attribute is not part of the W3C spec for DIV elements, only for form elements.

The jQuery approach suggested by Martin is the only foolproof way you\'re going to accomplish this.

回答5:

Here is a quick comment for people who don\'t need a div but just a blockelement. In HTML5 <fieldset disabled=\"disabled\"></fieldset> got the disabled attribute. Every form element in a disabled fieldset is disabled.

回答6:

similar to cletu\'s solution, but i got an error using that solution, this is the workaround:

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

works fine on me

回答7:

You can use this simple CSS statement to disable events

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

回答8:

Browsers tested: IE 9, Chrome, Firefox and 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);
        }
    }

回答9:

HTML input controls can be disabled using \'disabled\' attribute as you know. Once \'disabled\' attribute for an input control is set, event handlers associated with such control are not invoked.

You have to simulate above behavior for HTML elements that don\'t support \'disabled\' attribute like div, if you wish.

If you have a div, and you want to support click or a key event on that div, then you have to do two things: 1) When you want to disable the div, set its disabled attribute as usual (just to comply with the convention) 2) In your div\'s click and/or key handlers, check if disabled attribute is set on the div. If it is, then just disregard the click or key event (e.g. just return immediately). If disabled attribute is not set, then do your div\'s click and/or key event logic.

Above steps are browser independent as well.

回答10:

One way to achieve this is by adding the disabled prop to all children of the div. You can achieve this very easily:

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

$(\"#myDiv\") finds the div, .find(\"*\") gets you all child nodes in all levels and .prop(\'disabled\', true) disables each one.

This way all content is disabled and you can\'t click them, tab to them, scroll them, etc. Also, you don\'t need to add any css classes.

回答11:

I thought I\'d chip in a couple of notes.

1. < div > can be disabled in IE8/9. I assume this is \"incorrect\", and it threw me off
2. Don\'t use .removeProp(), as it has a permanent effect on the element. Use .prop(\"disabled\", false) instead
3. $(\"#myDiv\").filter(\"input,textarea,select,button\").prop(\"disabled\", true) is more explicit and will catch some form elements you would miss with :input

回答12:

This is for the searchers,

The best I did is,

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

回答13:

I would use an improved version of Cletus\' function:

 $.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\');
      }
    });
};

Which stores the original \'disabled\' property of the element.

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

回答14:

How to disable the contents of a DIV

The CSS pointer-events property alone doesn\'t disable child elements from scrolling, and it\'s not supported by IE10 and under for DIV elements (only for SVG). http://caniuse.com/#feat=pointer-events

To disable the contents of a DIV on all browsers.

Javascript:

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

Css:

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

To disable the contents of a DIV on all browsers, except IE10 and under.

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

回答15:

Below is a more comprehensive solution to masking divs enabling

• no separate CSS
• cover the whole page or just an element
• specify mask color and opacity
• specify Z-index so you can show popups over the mask
• show an hourglass cursor over the mask
• removing the masking div on maksOff so a different one can be shown later
• stretch mask when element resize
• return the mask element so you can style it etc

Also included is hourglassOn and hourglassOff which can be used separately

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

With this you can do for example:

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

see jsfiddle

回答16:

As mentioned in comments, you are still able to access element by navigating between elements by using tab key. so I recommend this :

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

回答17:

If you wanted to keep the semantics of disabled as follows

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

you could add the following CSS

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

the benefit here is that you\'re not working with classes on the div that you want to work with

回答18:

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

回答19:

Another way, in jQuery, would be to get the inner height, inner width and positioning of the containing DIV, and simply overlay another DIV, transparent, over the top the same size. This will work on all elements inside that container, instead of only the inputs.

Remember though, with JS disabled, you\'ll still be able to use the DIVs inputs/content. The same goes with the above answers too.

回答20:

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

回答21:

This css only/noscript solution adds an overlay above a fieldset (or a div or any other element), preventing interaction:

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

If you want an invisible i.e. transparent overlay, set the background to e.g. rgba(128,128,128,0), as it won\'t work without a background. The above works for IE9+. The following much simpler css will work on IE11+

[disabled] { pointer-events: none; }

Chrome

回答22:

If you are simply trying to stop people clicking and are not horrifically worried about security - I have found an absolute placed div with a z-index of 99999 sorts it fine. You can\'t click or access any of the content because the div is placed over it. Might be a bit simpler and is a CSS only solution until you need to remove it.

回答23:

the simpleset solution

look at my selector

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

the fieldsetUserInfo is div contains all inputs I want to disabled or Enable

hope this helps you

回答24:

EDIT: Below I\'ve used .on() method, instead use .bind() method

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

to remove your setting, you can use .unbind() method. Whereas the .off() method doesn\'t work as expected.

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

After researching hundreds of solutions! learning about pointer-events, below is what I did.

As @Kokodoko mentioned in his solution which is apt for all browsers except IE. pointer-events work in IE11 and not in the lower versions. I also noticed in IE11, pointer-events do not work on the child elements. And hence if we have something like below

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

where span -is the child element, setting pointer-events: nonewont work

To overcome this problem I wrote a function which could act as pointer-events for IE and will work in the lower versions.

In JS File

DisablePointerEvents(\".DisablePointerEvents\");


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

In CSS File

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

In HTML

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

This faked the pointer-events scenario where pointer-events doesnt work and when the above condition of child elements occur.

JS Fiddle for the same

https://jsfiddle.net/rpxxrjxh/