我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
当前回答
如果你想禁用指针事件,它很容易处理
document.getElementById("appliedDatepicker").style.pointerEvents = "none";
or
如果你想启用,
document.getElementById("appliedDatepicker").style.pointerEvents = "auto";
其他回答
HTML输入控件可以使用'disabled'属性禁用。一旦为输入控件设置了'disabled'属性,就不会调用与该控件关联的事件处理程序。
如果你愿意,你必须模拟上述行为的HTML元素,不支持'disabled'属性,如div。
如果你有一个div,你想要在这个div上支持点击或一个键事件,那么你必须做两件事: 1)当你想禁用div时,像往常一样设置它的disabled属性(只是为了遵守约定) 2)在你的div的点击和/或键处理程序中,检查是否在div上设置了disabled属性。如果是,那么忽略点击或键事件(例如,立即返回)。如果未设置disabled属性,则执行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);
对我来说还行
这是给搜索者的,
我做得最好的是,
$('#myDiv *').attr("disabled", true);
$('#myDiv *').fadeTo('slow', .6);
如何禁用<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;
}