我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
我的假设是,如果我禁用了一个div,所有的内容也都禁用了。
然而,内容是灰色的,但我仍然可以与它互动。
有办法做到吗?(禁用一个div,让所有的内容也禁用)
当前回答
或者只使用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');
}
其他回答
在form和fieldset标签中包装div:
<form>
<fieldset disabled>
<div>your controls</div>
</fieldset>
</form>
上面的许多答案只适用于表单元素。禁用任何DIV(包括其内容)的简单方法是禁用鼠标交互。例如:
$("#mydiv").addClass("disabledbutton");
CSS
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
补充:
许多人这样评论:“这只会禁止鼠标事件,但控件仍然是启用的”和“你仍然可以通过键盘导航”。你可以将此代码添加到你的脚本中,输入不能以键盘选项卡等其他方式到达。您可以更改此代码以满足您的需要。
$([Parent Container]).find('input').each(function () {
$(this).attr('disabled', 'disabled');
});
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");
}
这是给搜索者的,
我做得最好的是,
$('#myDiv *').attr("disabled", true);
$('#myDiv *').fadeTo('slow', .6);
编辑: 下面我使用了.on()方法,改用.bind()方法
$(this).bind('click', false);
$(this).bind('contextmenu', false);
要删除设置,可以使用.unbind()方法。然而.off()方法并没有像预期的那样工作。
$(this).unbind('click', false);
$(this).unbind('contextmenu', false);
在研究了数百种解决方案后!学习指针事件,下面是我所做的。
正如@Kokodoko在他的解决方案中提到的,这适用于除IE之外的所有浏览器。指针事件在IE11中有效,在低版本中无效。我还注意到在IE11中,指针事件在子元素上不起作用。因此,如果我们有下面这样的东西
<a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>
哪里span -是子元素,设置指针事件:无效
为了克服这个问题,我写了一个函数,它可以作为IE的指针事件,并且可以在较低的版本中工作。
在JS文件中
DisablePointerEvents(".DisablePointerEvents");
function DisablePointerEvents(classId) {
$(classId).each(function () {
$(this).on('click', false );
$(this).on('contextmenu', false );
});
}
在CSS文件中
.DisablePointerEvents{
pointer-events: none;
opacity: 0.7;
cursor: default;
}
在HTML中
<a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>
这伪造了指针事件场景,即指针事件不工作,当上述条件的子元素发生时。
JS也一样
https://jsfiddle.net/rpxxrjxh/