我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
当前回答
使用JQuery这样的框架来做以下事情:
function toggleStatus() {
if ($('#toggleElement').is(':checked')) {
$('#idOfTheDIV :input').attr('disabled', true);
} else {
$('#idOfTheDIV :input').removeAttr('disabled');
}
}
禁用和启用输入元素在一个Div块使用jQuery应该帮助你!
从jQuery 1.6开始,禁用功能应该使用。prop而不是。attr。
其他回答
有一些可配置的javascript库可以接收html字符串或dom元素,并去掉不需要的标签和属性。这些被称为html杀菌剂。例如:
DOMPurify 疯狂的 sanitize-html
例如,在DOMPurify中
DOMPurify.sanitize('<div>abc<iframe//src=jAva	script:alert(3)>def</div>');
// becomes <div>abcdef</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();
测试浏览器: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');
});
如果你想禁用指针事件,它很容易处理
document.getElementById("appliedDatepicker").style.pointerEvents = "none";
or
如果你想启用,
document.getElementById("appliedDatepicker").style.pointerEvents = "auto";