如何禁用所有div内容

我的假设是，如果我禁用了一个div，所有的内容也都禁用了。

然而，内容是灰色的，但我仍然可以与它互动。

有办法做到吗?(禁用一个div，让所有的内容也禁用)

648831 次浏览
小开

使用JQuery这样的框架来做以下事情:

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

使用jQuery禁用和启用Div块中的输入元素应该帮助你!

从jQuery 1.6开始，你应该使用.prop而不是.attr来禁用。

小开

disabled属性不是DIV元素的W3C规范的一部分，只适用于表单元素。

Martin建议的jQuery方法是实现这一目标的唯一万无一失的方法。

小开

我只是想提到用于启用和禁用元素的扩展方法。我认为这比直接添加和删除属性要干净得多。

然后你只需做:

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

在jQuery中，另一种方法是获得包含DIV的内部高度、内部宽度和位置，然后简单地覆盖另一个DIV，透明的，在相同大小的上面。这将适用于容器内的所有元素，而不仅仅是输入。

记住，尽管禁用了JS，你仍然可以使用DIVs的输入/内容。上面的答案也一样。

小开

我想我得插几句话。

  1. & lt;在IE8/9下可以禁用“div >”。我认为这是“不正确的”，这让我感到困惑
  2. 不要使用. removeprop()，因为它对元素有永久的影响。使用.prop("disabled"， false)代替
  3. $ (" # myDiv”).filter(“输入、文本区域、选择按钮”)。Prop ("disabled"， true)更显式，它将捕获一些您在:input中遗漏的表单元素
小开

我会使用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');
}
});
};

它存储元素的原始“disabled”属性。

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

HTML输入控件可以使用'disabled'属性禁用。一旦为输入控件设置了'disabled'属性，就不会调用与该控件关联的事件处理程序。

如果你愿意，你必须模拟上述行为的HTML元素，不支持'disabled'属性，如div。

如果你有一个div，并且你想要在这个div上支持点击或一个键事件，那么你必须做两件事: 1)当你想禁用div时，像往常一样设置它的disabled属性(只是为了遵守约定) 2)在你的div的点击和/或键处理程序中，检查是否在div上设置了disabled属性。如果是，那么忽略点击或键事件(例如，立即返回)。如果disabled属性没有设置，那么做你的div的点击和/或关键事件逻辑

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

小开

测试浏览器: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);
}
}
小开

类似于cletu的解决方案，但我得到了一个错误使用的解决方案，这是解决方案:

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

对我来说还行

小开 
$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);
小开
最佳答案

上面的许多答案只适用于表单元素。禁用任何DIV(包括其内容)的简单方法是禁用鼠标交互。例如:

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

CSS

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

< >强补充:< / >强

许多人这样评论:“这只会禁止鼠标事件，但控制仍然是启用的”;而且“你仍然可以用键盘导航”。你可以将此代码添加到你的脚本中，输入不能以键盘选项卡等其他方式到达。您可以更改此代码以满足您的需要。

$([Parent Container]).find('input').each(function () {
$(this).attr('disabled', 'disabled');
});
小开

这个css仅/noscript解决方案在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; }

铬

小开

您可以使用这个简单的CSS语句禁用事件

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

如何禁用<div/>的内容

CSS pointer-events属性本身不会禁用子元素滚动，并且IE10及以下版本不支持<div/>元素(仅适用于SVG)。 http://caniuse.com/#feat=pointer-events < / p >

在所有浏览器上禁用<div/>的内容。

Jquery:

$("#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/>的内容。

Jquery:

$("#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;
}
小开

下面是一个更全面的屏蔽div启用解决方案

  • 无独立CSS
  • 覆盖整个页面或只覆盖一个元素
  • 指定蒙版颜色和不透明度
  • 指定Z-index，这样你就可以在蒙版上显示弹出窗口
  • 在面具上显示沙漏形光标
  • 删除maksOff上的掩蔽div，以便稍后显示不同的div
  • 当元素调整大小时拉伸蒙版
  • 返回掩码元素，这样你就可以设置它的样式了

还包括hourglassOn和hourglassOff，可以单独使用

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

小开

如果你只是想阻止人们点击，并且不太担心安全问题——我已经找到了一个z-index为99999的绝对div。您不能单击或访问任何内容，因为div被放置在它上面。可能更简单一点，是CSS唯一的解决方案，直到你需要删除它。

小开

这是给搜索者的，

我做得最好的是，

$('#myDiv *').attr("disabled", true);
$('#myDiv *').fadeTo('slow', .6);
小开
< p >编辑: 下面我使用了.on()方法，而不是使用.bind()方法

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

要删除你的设置，你可以使用.unbind()方法。然而.off()方法并没有像预期的那样工作。

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

在研究了数百种解决方案后!学习指针事件，下面是我所做的。

正如< >强@Kokodoko < / >强在他的解决方案中提到的，适用于除IE之外的所有浏览器。pointer-events适用于IE11，而不适用于较低的版本。我还注意到在IE11中，指针事件对子元素不起作用。因此，如果我们有下面这样的东西

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

哪里跨度-是子元素，设置__abc0不工作

为了克服这个问题，我写了一个函数，它可以作为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/

小开

简单集解

看看我的选择器

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

fieldsetUserInfo是div包含我想禁用或启用的所有输入

希望这对你有所帮助

小开

这里有一个快速的评论给那些不需要div而只需要blockelement的人。在HTML5中，<fieldset disabled="disabled"></fieldset>获得了disabled属性。禁用字段集中的每个表单元素都是禁用的。

小开

实现这一点的一种方法是将disabled道具添加到div的所有子元素中。你可以很容易地实现这一点:

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

$("#myDiv")找到div， .find("*")得到所有级别的所有子节点，.prop('disabled', true)禁用每个子节点。

这样所有的内容都是禁用的，你不能点击它们，标签到它们，滚动它们，等等。此外，您不需要添加任何css类。

小开

正如评论中提到的，您仍然可以通过使用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上的类

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

将div包装在form和fieldset标记中:

<form>
<fieldset disabled>
<div>your controls</div>
</fieldset>
</form>
小开

或者只使用css和一个“disabled”类 注意:不使用disabled属性
.
.
. 

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

然后，在初始化页面或切换按钮时，可以打开或关闭它

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

有一些可配置的javascript库可以接收html字符串或dom元素，并去掉不需要的标签和属性。它们被称为html消毒液。例如:

例如，在DOMPurify中

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

正如许多答案已经澄清的那样，disabled不是DIV属性。然而xHTML意味着可扩展的HTML。它意味着你可以定义自己的HTML属性吗(所有前端框架都这样做)。还有CSS支持属性选择器，也就是[]。

使用标准的HTML和你定义的属性:

<div disabled>My disabled div</div>

使用CSS:

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

注意:你也可以使用带有ID或类名的CSS属性选择器，例如.myDiv[disabled] {...}也可以应用值过滤器，例如:在HTML后面禁用值为div[disabled=disabled] {...}的标准属性。

小开

如果你想禁用指针事件，它很容易处理

document.getElementById("appliedDatepicker").style.pointerEvents = "none";

或

如果你想启用，

document.getElementById("appliedDatepicker").style.pointerEvents = "auto";

提交答案