我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
当前回答
这个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仅/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; }
铬
如果你想禁用指针事件,它很容易处理
document.getElementById("appliedDatepicker").style.pointerEvents = "none";
or
如果你想启用,
document.getElementById("appliedDatepicker").style.pointerEvents = "auto";
测试浏览器: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);
}
}
上面的许多答案只适用于表单元素。禁用任何DIV(包括其内容)的简单方法是禁用鼠标交互。例如:
$("#mydiv").addClass("disabledbutton");
CSS
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
补充:
许多人这样评论:“这只会禁止鼠标事件,但控件仍然是启用的”和“你仍然可以通过键盘导航”。你可以将此代码添加到你的脚本中,输入不能以键盘选项卡等其他方式到达。您可以更改此代码以满足您的需要。
$([Parent Container]).find('input').each(function () {
$(this).attr('disabled', 'disabled');
});
HTML输入控件可以使用'disabled'属性禁用。一旦为输入控件设置了'disabled'属性,就不会调用与该控件关联的事件处理程序。
如果你愿意,你必须模拟上述行为的HTML元素,不支持'disabled'属性,如div。
如果你有一个div,你想要在这个div上支持点击或一个键事件,那么你必须做两件事: 1)当你想禁用div时,像往常一样设置它的disabled属性(只是为了遵守约定) 2)在你的div的点击和/或键处理程序中,检查是否在div上设置了disabled属性。如果是,那么忽略点击或键事件(例如,立即返回)。如果未设置disabled属性,则执行div的单击和/或键事件逻辑。
以上步骤也是浏览器独立的。