我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
当前回答
正如许多答案已经澄清的那样,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]{…}。
其他回答
使用JQuery这样的框架来做以下事情:
function toggleStatus() {
if ($('#toggleElement').is(':checked')) {
$('#idOfTheDIV :input').attr('disabled', true);
} else {
$('#idOfTheDIV :input').removeAttr('disabled');
}
}
禁用和启用输入元素在一个Div块使用jQuery应该帮助你!
从jQuery 1.6开始,禁用功能应该使用。prop而不是。attr。
禁用属性不是DIV元素的W3C规范的一部分,只是表单元素的一部分。
Martin建议的jQuery方法是实现这一目标的唯一万无一失的方法。
我会使用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();
我只想提到这个用于启用和禁用元素的扩展方法。我认为这比直接添加和删除属性要干净得多。
然后你只需做:
$("div *").disable();
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");
}