使用 jquery 禁用所有 div 内容，包括锚点、段落标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16642919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable all div contents using jquery including anchor, paragraph tags?
提问by Irfan Ahmed
i need a little help in html css, i want to disable all contents in a div having class "main-wrapper" after user clicks on a logout button through a jquery function, i tried in 2 ways, but in vain! here is my jquery function,
我需要在 html css 方面的一些帮助，我想在用户通过 jquery 函数单击注销按钮后禁用具有“main-wrapper”类的 div 中的所有内容，我尝试了两种方法，但徒劳无功！这是我的 jquery 函数，
function loadLogoutBox() {
$('#logout_box').fadeIn("slow");
$(".main-wrapper").css({ // this is just for style
"opacity": "0.3"
});
$(".main-wrapper").disable();
$(".top-menu").attr('disabled', true);
}
any help please!
任何帮助请！
采纳答案by Jon
If I understand you correctly, you can create a div that takes up 100% width and height with a transparent background and have it appear above the main wrapper and below the logout box.
如果我理解正确，您可以创建一个 div，该 div 占据 100% 的宽度和高度，并带有透明背景，并将其显示在主包装器上方和注销框下方。
HTML:
HTML：
<div id="cover"></div>
CSS:
CSS：
#cover {
position: absolute;
height: 100%;
width: 100%;
z-index: 1; /* make sure logout_box has a z-index of 2 */
background-color: none;
display: none;
}
jQuery:
jQuery：
function loadLogoutBox() {
$("#cover").css("display", "block");
$('#logout_box').fadeIn("slow");
$(".main-wrapper").css({ // this is just for style
"opacity": "0.3"
});
}
With this method, you will obviously also have to add some jQuery to take away the cover once the user returns to the main screen.
使用此方法，您显然还必须添加一些 jQuery 以在用户返回主屏幕时移除封面。
This can be done simply by:
这可以通过以下方式简单地完成：
$("#cover").css("display", "none");
回答by SomeShinyObject
The disabledattribute only applies to as subset of formelements (input, button, selectand texareaare the only I can think of right off the bat)
该disabled属性仅适用于form元素的子集（input, button，select并且texarea是我能立即想到的唯一元素）
$('.main-wrapper').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true);
});
Also you can put an overlay divover your wrapper to prevent selection and anchor tag usage. Add a divto your HTML and then add this to your JS and CSS:
您还可以div在包装器上放置一个覆盖层，以防止选择和锚标记的使用。将 a 添加div到您的 HTML，然后将其添加到您的 JS 和 CSS：
JavaScript
JavaScript
var mainWrapper = $('.main-wrapper')
mainWrapper.find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true);
});
var mainWrapperPos = mainWrapper.position();
var mainWrapperHeight = mainWrapper.height();
var mainWrapperWidth = mainWrapper.width();
$('#cover').css({
'opacity':0.3,
'top': mainWrapperPos.top,
'left': mainWrapperPos.left,
'height': mainWrapperHeight,
'width': $('.main-wrapper').width()
});
CSS
CSS
#cover {
position:absolute;
}
Note:You should do both the iteration of disabled and the overlay to prevent tabbed selection. Also with <a>anchor elements you could set the hrefto #to prevent tabbed usage also.
注意：您应该同时执行禁用和覆盖的迭代以防止选项卡式选择。另外随着<a>锚元素，你可以设置href，以#防止标签式的使用也。
回答by Jon
Add a overlaylayer inside your wrapper, and make it at front of allyour elements, but at back of your popup. Consider you have the following HTML:
overlay在您的包装器内添加一个图层，并将其放在所有元素的前面，但在弹出窗口的后面。考虑您有以下 HTML：
<div class="main-wrapper">
Here you have data
<span class="logout">[LOGOUT]</span>
<div class="popup">You have successfully logout</div>
<div class="overlay"></div>
</div>
And with some css:
并使用一些 css：
.main-wrapper {
background: green;
padding: 100px;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
opacity: 0.7;
z-index: 5000;
display: none;
}
.popup {
background: red;
padding: 5px;
z-index: 6000;
position: absolute;
display: none;
}
And when you click LOGOUT:
当您单击注销时：
$(function () {
$('.logout').on('click', function () {
$('.overlay').css('display', 'block');
$('.popup').css('display', 'block');
});
});
Check the FIDDLE DEMO.
检查小提琴演示。
回答by Andrew Manson
The easiest thing is to create an overlay over your content, and behind the popup. And I believe the correct CSS is as follows:
最简单的方法是在您的内容上和弹出窗口后面创建一个叠加层。我相信正确的 CSS 如下：
.overlay { display: none; position: absolute; background: #000; opacity: 0.3: top: 0; left: 0; width: 100%; height: 100%; }
.overlay { 显示：无；位置：绝对；背景：#000；不透明度：0.3：顶部：0；左：0；宽度：100%；高度：100%；}
You may or may not have to add a z-index. Then just use some jQuery to fadeIn the element.
您可能需要也可能不需要添加 z-index。然后只需使用一些 jQuery 来淡入元素。
However, this DIV cannot be used as a container. It must be a stand alone element.
但是，此 DIV 不能用作容器。它必须是一个独立的元素。
And excuse me for not formatting, I am on my iPhone.
请原谅我没有格式化，我在我的 iPhone 上。
回答by Suhas_United
Andrew is right.But i can suggest you a work around ,have a empty div hidden with the same height,width and position of the div $(".main-wrapper") but with z-index more than the $(".main-wrapper") div.Initially have the empty div hidden ,and when user clicks on logout show the empty div,there by the empty div recieves all the click events and your $(".main-wrapper") div looks disabled.
安德鲁是对的。但我可以建议你解决一个问题，隐藏一个空 div，其高度、宽度和位置与 div $(".main-wrapper") 相同，但 z-index 大于 $("。 main-wrapper") div.Initially 将空的 div 隐藏起来，当用户点击注销时显示空的 div，空的 div 会收到所有的点击事件，而你的 $(".main-wrapper") div 看起来是禁用的。
回答by Andrew Ngo
Without seeing the html, the most likely problem is that $(".main-wrapper") returns a collection which has no disable method. You'll need to enumerate and find the objects which do have a disable function and call that instead.
没有看到 html，最可能的问题是 $(".main-wrapper") 返回一个没有禁用方法的集合。您需要枚举并找到具有禁用功能的对象并调用它。
Edit: There is no jquery disable method. You'll need to either hide elements or disable them with $object.prop('disabled', true);
编辑：没有 jquery 禁用方法。您需要隐藏元素或使用 $object.prop('disabled', true); 禁用它们。
回答by Ashish Panery
This code is for disable all input element of a div having class main-wrapper .
此代码用于禁用具有类 main-wrapper 的 div 的所有输入元素。
$('.main-wrapper :input').attr('disabled', true);
same like input element you can disable other element by placing tag name in place of input.
与输入元素相同，您可以通过放置标签名称代替输入来禁用其他元素。
$('.main-wrapper :select').attr('disabled', true);
