使用jquery禁用所有div内容，包括锚点和段落标签？

Question

我需要一点关于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);

}

任何帮助请！

- Irfan Ahmed

---

.contents() 或 .contains() - Jonny Sooter

发布一些你的HTML代码。 - Vond Ritz

除了发布相关的标记之外，您能否更具体地定义“禁用所有内容”的含义？ - ajp15243

所有我的div都在“main-wrapper类”中，我不想隐藏它，但我将其不透明度设置为0.3，这样弹出窗口就可以正常显示，不透明度也可以正常工作，但我仍然可以在弹出框后面进行交互。我想要的是，当用户刚刚注销时，他可以看到页面，但不能再进行任何交互！ - Irfan Ahmed

在.main-wrapper内添加一个带有absolute定位和所需opacity的覆盖层。 - user1823761

Answer 1

disabled属性仅适用于form元素的子集（input，button，select和texarea是我能想到的唯一几个）

$('.main-wrapper').find('input, textarea, button, select').each(function () {
    $(this).prop('disabled', true);
});

您可以在包装器上放置一个遮罩 div，以防止选择和锚标签的使用。将一个 div 添加到您的 HTML 中，然后将以下内容添加到您的 JS 和 CSS 中：

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

#cover {
    position:absolute;
}

注意：为了防止选项卡选择，您应该同时进行禁用和覆盖。此外，对于<a>锚元素，您可以将href设置为#以防止使用选项卡。

jsFiddle

- SomeShinyObject

---

使用逗号,来分隔textarea、button和select将使它们选择所有这些元素，而不仅仅是.main-wrapper内的元素。你需要在它们的前面加上.main-wrapper，或者使用可选的上下文参数（参见这里）。 - ajp15243

@ChristopherW 对于输入，它可以正常工作，但对于我的锚点标签怎么办？我想禁用每一个东西！还有其他方法可以做到这一点吗？ - Irfan Ahmed

@user2324242 我即将更新。 - SomeShinyObject

@user2324242 好的，现在应该没问题了。 - SomeShinyObject

Answer 2

如果我理解正确的话，您可以创建一个宽度和高度均为100%，背景透明的div，让它出现在主包装器上方，下面是注销框。

HTML:

<div id="cover"></div>

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:

function loadLogoutBox() {
    $("#cover").css("display", "block");
    $('#logout_box').fadeIn("slow");
    $(".main-wrapper").css({ // this is just for style
            "opacity": "0.3"  
    });
}

使用这种方法，当用户返回主屏幕时，您显然也需要添加一些jQuery来移除覆盖。

可以通过以下简单步骤完成：

$("#cover").css("display", "none");

- Jon

---

元素的选项卡选择？ - SomeShinyObject

Answer 3

工作的FIDDLE演示

在你的包裹器内添加一个覆盖层，并将其置于所有元素的前面，但位于弹出窗口的后面。考虑以下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>

再加上一些 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;
}

当您点击“注销”时：

$(function () {
    $('.logout').on('click', function () {
        $('.overlay').css('display', 'block');
        $('.popup').css('display', 'block');
    });
});

请查看FIDDLE DEMO。

- user1823761

Answer 4

这段代码用于禁用具有类名 main-wrapper 的 div 元素中的所有输入元素。

     $('.main-wrapper :input').attr('disabled', true);  

与输入元素类似，您可以通过在标签名称中放置来禁用其他元素。

      $('.main-wrapper :select').attr('disabled', true);  

- Ashish Panery

Answer 5

你应该使用 prop() 而不是 attr()

$(".top-menu").attr('disabled', true);

应该是，这里假设.top-menu应用于input、textarea等元素。

$(".top-menu").prop('disabled', true);

或者

$(".top-menu").attr('disabled', 'disabled');

- Rohan Kumar

Answer 6

没有看到HTML代码，最有可能的问题是$(".main-wrapper")返回了一个没有disable方法的集合。你需要枚举并找到那些具有disable函数的对象，并调用它。

编辑：jQuery没有disable方法。你需要使用$object.prop('disabled', true);来隐藏元素或禁用它们。

- Andrew Ngo

Answer 7

Andrew是正确的。但我可以建议您一个解决方法，使用一个空的div来隐藏与$(".main-wrapper") div相同的高度、宽度和位置，但z-index比$(".main-wrapper") div更高。最初将空的div隐藏起来，当用户单击注销时显示空的div，这样空的div就会接收所有的点击事件，您的$(".main-wrapper") div看起来就像被禁用了。

- Suhas_United

Answer 8

最简单的方法是在弹出窗口后面创建一个覆盖层。我相信正确的CSS如下：

.overlay { display: none; position: absolute; background: #000; opacity: 0.3: top: 0; left: 0; width: 100%; height: 100%; }

您可能需要添加z-index。然后只需使用一些jQuery来淡入元素即可。

但是，此DIV不能用作容器。它必须是一个独立的元素。

对于格式不当，请原谅，我正在使用iPhone。

- Andrew Manson