在客户端禁用 HTML 元素 (javascript)答案

【问题标题】：Disable HTML element in the client side (javascript)在客户端禁用 HTML 元素 (javascript)
【发布时间】：2009-02-02 20:34:32
【问题描述】：

我正在寻找禁用整个 HTML 元素（通常是 <div>）的最简单方法。

“禁用”是指一种阻止用户单击元素中包含的任何元素的方法。例如，如果您将表单放入禁用的元素中，则表单元素将无法获得焦点。我尝试过一种遍历 DOM 并禁用它找到的每个元素的方法。它有效，但似乎太复杂了，我正在寻找一种更简单的方法，比如$("#mydiv").disable()

我想防止用户触发其他事件，如 onmouseover 等，甚至避免用户使用键盘选择和修改元素。也许某种覆盖要禁用的整个元素的半透明覆盖层可以解决问题。

这可以用 jQuery 实现吗？或者你知道用普通 JS 实现它的简单方法吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

jQuery plugin BlockUI 是实现这一目标的好方法。

【讨论】：

谢谢。可能比预期的大一点（14KB），但它确实有效。它甚至可以防止用户使用键盘与元素进行交互。在接受这个答案之前，让我们看看是否有其他人提供单线解决方案。

【解决方案2】：

类似于：

$("#mydiv").find("input").attr('disabled','disabled');

这基本上会在 myDiv 元素中找到所有 input 元素，并禁用它们。

【讨论】：

$("#mydiv input").attr('disabled', 'true'); 更干净，可能更快。

【解决方案3】：

在禁用 div 之上的 div 怎么样？

<style>

    div.disableall { filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25; background-color: black; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 500; /* just preventing */ }

</style>

并添加到您要禁用的 div：

<script type="text/javascript">
    var disable = document.createElement("div");
    disable.className = 'disableall';
    document.getElementById('mydiv').appendChild(disable);
</script>

我想这应该可以工作。

ps：你应该根据需要修复z-index

【讨论】：

【解决方案4】：

这是DOM遍历的方法，但没那么复杂：

$('#mydiv').find('input').attr('disabled','true');
$('#mydiv *').unbind();

【讨论】：

我想你想要 $('#mydiv *').unbind();
酷！总是用 jQuery 发现新东西。
unbind 方法是否会阻止用户使用键盘选择元素（使用 Tab 键导航）？

【解决方案5】：

我很快想到的是使用悬停在旧内容上方的半透明 div（使用诸如“position: relative”和“top: -123px”之类的 CSS 选项）或将READONLY 添加到您的表单和按钮中。

但是，无论您选择哪种方式，请记住这些更改只是客户端。 JavaScript、HTML 和 CSS 都非常容易在运行时更改。所以，在服务器端也要为这些事情做好准备。

【讨论】：

【解决方案6】：

您可以创建一个 div 来动态覆盖它 - 在原型中它会是这样的：

var el = new Element("div", {style: "position: absolute; z-index: 2"});
Element.insert(document.body, el);
Element.clonePosition(el, $("mydiv"));

然后根据您的喜好设置样式，使其禁用。

但是，如果您对该区域中的元素有一个很好的了解，那么禁用似乎是更好的选择 - 这可以防止键盘访问元素 - 使用 Tab 键访问它们并输入数据或使用返回键来激活它们。

【讨论】：

【解决方案7】：

jQuery BlockUI 插件允许您在使用 AJAX 时模拟同步行为，而无需锁定浏览器[1]。激活后，它将阻止用户对页面（或页面的一部分）进行活动，直到它被停用。 BlockUI 将元素添加到 DOM 以使其具有阻止用户交互的外观和行为。

http://malsup.com/jquery/block/

【讨论】：