如何禁用所有的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的点击和/或键事件逻辑。

以上步骤也是浏览器独立的。

我以为我会记下几个笔记。

  1. 可以在IE8 / 9中禁用<div>。 我认为这是“不正确的”,它把我扔了
  2. 请勿使用.removeProp(),因为它对元素具有永久效果。 改用.prop(“disabled”,false)
  3. $(“#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-eventsIE11中工作,而不是在较低的版本。 我也注意到,在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小提琴相同

https://jsfiddle.net/rpxxrjxh/