我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
当前回答
在form和fieldset标签中包装div:
<form>
<fieldset disabled>
<div>your controls</div>
</fieldset>
</form>
其他回答
我会使用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);
}
}
这是给搜索者的,
我做得最好的是,
$('#myDiv *').attr("disabled", true);
$('#myDiv *').fadeTo('slow', .6);
或者只使用css和一个“disabled”类。 注意:不要使用disabled属性。 不需要摆弄jQuery的开/关。 这是非常简单的,跨浏览器工作:
.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 疯狂的 sanitize-html
例如,在DOMPurify中
DOMPurify.sanitize('<div>abc<iframe//src=jAva	script:alert(3)>def</div>');
// becomes <div>abcdef</div>