我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
当前回答
我会使用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();
其他回答
类似于cletu的解决方案,但我得到了一个错误使用的解决方案,这是解决方案:
$('div *').prop('disabled',true);
// or
$('#the_div_id *').prop('disabled',true);
对我来说还行
这个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; }
铬
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");
}
正如许多答案已经澄清的那样,disabled不是DIV属性。然而,xHTML意味着可扩展的HTML。这意味着您可以定义自己的HTML属性(所有Frontend框架都可以这样做)。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]{…}。
如何禁用<div/>的内容
CSS指针事件属性本身并不会禁止子元素滚动,并且对于<div/>元素,IE10及以下版本不支持它(仅针对SVG)。 http://caniuse.com/#feat=pointer-events
在所有浏览器上禁用<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;
}