如何禁用所有的div内容
我假设，如果我禁用一个div，所有的内容也被禁用。
然而，内容是灰色的，但我仍然可以与它互动。
有没有办法做到这一点？ （禁用div并禁用所有内容）
上面的许多答案只适用于表单元素。 禁用包含其内容的任何DIV的简单方法是仅禁用鼠标交互。 例如：
$("#mydiv").addClass("disabledbutton"); CSS
.disabledbutton { pointer-events: none; opacity: 0.4; }
使用像JQuery这样的框架来做这样的事情：
function toggleStatus() { if ($('#toggleElement').is(':checked')) { $('#idOfTheDIV :input').attr('disabled', true); } else { $('#idOfTheDIV :input').removeAttr('disabled'); } }
禁用和启用Div模块中的input元素使用jQuery应该可以帮到你！
从jQuery 1.6开始，应该使用.prop代替.attr来禁用。
我只想提到这个扩展方法来启用和禁用元素 。 我认为这比直接添加和删除属性要简单得多。
那么你只需做：
$("div *").disable();
禁用属性不是DIV元素的W3C规范的一部分，只适用于表单元素 。
Martin提出的jQuery方法是您要完成这一任务的唯一简单方法。
类似于cletu的解决scheme，但是我得到了一个错误使用该解决scheme，这是解决方法：
$('div *').prop('disabled',true); // or $('#the_div_id *').prop('disabled',true);
对我很好
你可以使用这个简单的CSS语句来禁用事件
#my-div { pointer-events:none; }
这里是一个快速的评论，谁不需要一个div，但只是一个blockelement。 在HTML5中<fieldset disabled="disabled"></fieldset>获得了disabled属性。 禁用的字段集中的每个表单元素都被禁用。
浏览器testing：IE 9，Chrome，Firefox和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); } }
正如你所知，HTMLinput控件可以使用“禁用”属性来禁用。 一旦设置了input控件的“禁用”属性，则不会调用与此类控件关联的事件处理程序。
如果您愿意，您必须为不支持“禁用”属性（如div）的HTML元素模拟上述行为。
如果你有一个div，并且你想支持那个div上的click或key事件，那么你必须做两件事情：1）当你想禁用div时，像往常一样设置它的disabled属性（只要符合约定）2）在您的div的点击和/或键处理程序中，检查是否在div上设置了禁用属性。 如果是这样，那么就忽略点击或按键事件（例如立即返回）。 如果禁用属性没有设置，那么做你的div的点击和/或键事件逻辑。
以上步骤也是浏览器独立的。
我以为我会记下几个笔记。
- 可以在IE8 / 9中禁用<div>。 我认为这是“不正确的”，它把我扔了
- 请勿使用.removeProp（），因为它对元素具有永久效果。 改用.prop（“disabled”，false）
- $（“＃myDiv”）。filter（“input，textarea，select，button”）。prop（“disabled”，true）更明确，会捕获一些表单元素，
这是为了search者，
我做的最好的是，
$('#myDiv *').attr("disabled", true); $('#myDiv *').fadeTo('slow', .6);
我将使用Cletusfunction的改进版本：
$.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'); } }); };
其中存储元素的原始“禁用”属性。
$('#myDiv *').disable();
如何禁用DIV的内容
单独使用CSS pointer-events属性不会禁用滚动的子元素，IE10和DIV元素（仅SVG）不支持。 http://caniuse.com/#feat=pointer-events
在所有浏览器上禁用DIV的内容。
使用Javascript：
$("#myDiv") .addClass("disable") .click(function () { return false; });
CSS：
.disable { opacity: 0.4; } // Disable scrolling on child elements .disable div, .disable textarea { overflow: hidden; }
除IE10以外，禁用所有浏览器上的DIV内容。
使用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; }
下面是一个更全面的解决scheme来屏蔽div启用
- 没有单独的CSS
- 覆盖整个页面或只是一个元素
- 指定蒙版颜色和不透明度
- 指定Z索引，以便您可以在遮罩上显示popup窗口
- 在掩码上显示一个沙漏光标
- 删除maksOff上的蒙版div，以便稍后可以显示不同的蒙版
- 当元素resize时拉伸掩码
- 返回掩码元素，以便您可以设置样式等
还包括可以单独使用的沙漏时间和沙漏闹钟
// 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; }
有了这个你可以做，例如：
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
见jsfiddle
实现这一目标的一个方法是将残疾人的道具添加到div的所有孩子。 你可以很容易地实现这一点：
$("#myDiv").find("*").prop('disabled', true);
$("#myDiv")查找div， .find("*")得到所有级别的所有子节点， .prop('disabled', true)禁用每个节点。
这样，所有的内容都被禁用，你不能点击它们，选项卡，滚动它们等等。另外，你不需要添加任何的CSS类。
另一种方法，在jQuery中，将获得包含DIV的内部高度，内部宽度和位置，并简单地覆盖另一个透明的DIV，其大小相同。 这将在该容器内的所有元素上工作，而不是仅仅是input。
请记住，在禁用JS的情况下，您仍然可以使用DIV的input/内容。 上面的答案也一样。
$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);
这个CSS / noscript解决scheme在fieldset（或div或任何其他元素）之上添加了一个叠加层，以防止交互：
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); }
如果你想要一个不可见的，即透明的覆盖，将背景设置为例如rgba（128,128,128,0），因为它不会在没有背景的情况下工作。 以上的作品为IE9 +。 以下更简单的CSS将在IE11 +上工作
[disabled] { pointer-events: none; }
铬
如果你只是试图阻止人们点击，并没有恐慌担心安全 – 我发现一个绝对的位置与Z指数99999sorting很好。 你不能点击或访问任何内容，因为div放在它上面。 可能会更简单一些，只有在你需要删除它时才是CSS解决scheme。
简单的解决scheme
看看我的select器
$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);
fieldsetUserInfo是div包含我想禁用或启用的所有input
希望这可以帮助你
如注释中所述，通过使用Tab键在元素之间导航，您仍然可以访问元素。 所以我推荐这个：
$("#mydiv") .css({"pointer-events" : "none" , "opacity" : "0.4"}) .attr("tabindex" , "-1");
如果你想保持残疾的语义如下
<div disabled="disabled"> Your content here </div>
你可以添加下面的CSS
div[disabled=disabled] { pointer-events: none; opacity: 0.4; }
这里的好处是你不用在你想要使用的div的类上工作
编辑：下面我使用.on()方法，而不是使用.bind()方法
$(this).bind('click', false); $(this).bind('contextmenu', false);
要删除您的设置，可以使用.unbind()方法。 而.off()方法不能按预期方式工作。
$(this).unbind('click', false); $(this).unbind('contextmenu', false);
经过研究数以百计的解决scheme！ 了解指针事件，下面是我所做的。
正如@Kokodoko在他的解决scheme中提到的，它适用于除IE之外的所有浏览器。 pointer-events在IE11中工作，而不是在较低的版本。 我也注意到，在IE11中 ，指针事件不适用于子元素。 因此，如果我们有像下面这样的东西
<a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>
其中span 是子元素 ，设置pointer-events: none不会工作
为了解决这个问题，我写了一个函数，它可以作为IE的指针事件，并且可以在低版本中工作。
在JS文件
DisablePointerEvents(".DisablePointerEvents"); function DisablePointerEvents(classId) { $(classId).each(function () { $(this).on('click', false ); $(this).on('contextmenu', false ); }); }
在CSS文件中
.DisablePointerEvents{ pointer-events: none; opacity: 0.7; cursor: default; }
在HTML中
<a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>
这个假pointer-events场景中的pointer-events不起作用，当上述子元素的条件发生时。
JS小提琴相同
