如何禁用所有div内容

20 浏览
0 Comments

如何禁用所有div内容

我以为如果我禁用一个div，其中的所有内容也会被禁用。

然而，内容变灰了，但我仍然可以与之交互。

有没有办法做到这一点？（禁用一个div并且使所有内容也被禁用）

0

3 答案

0 Comments

问题：如何禁用所有div内容？

原因：这个问题的出现是因为作者想要禁用一个div元素以及其中包含的所有内容，但是他发现在HTML5中并没有直接禁用div元素的方法。

解决方法：有几种解决方法被提出来，其中一种是使用HTML5中的<fieldset disabled="disabled"></fieldset>元素来代替div元素。这个方法可以禁用所有表单元素，而且是最语义化的解决方法。但是需要注意的是，目前Edge浏览器不会继承父级fieldset元素的disabled属性值，如果父级fieldset元素位于另一个fieldset元素内部，则无法禁用其中的表单元素。

0
0 Comments

问题出现的原因是需要禁用一个div中的所有内容，但是现有的解决方法只能禁用input元素，不能禁用其他类型的元素（例如li元素或a元素）。

要解决这个问题，可以使用jQuery的.prop方法来禁用所有元素，而不仅仅是input元素。可以使用以下代码实现禁用和启用div中的所有内容：

function toggleContent() {
    if ($('#toggleElement').is(':checked')) {
        $('#idOfTheDIV :input').prop('disabled', true);
        $('#idOfTheDIV').find('*').prop('disabled', true);
    } else {
        $('#idOfTheDIV :input').prop('disabled', false);
        $('#idOfTheDIV').find('*').prop('disabled', false);
    }   
}

这样就可以禁用div中的所有内容，包括input元素以及其他类型的元素。需要注意的是，这种方法可能会影响到div中的其他功能，例如自定义的鼠标事件。如果需要保留这些功能，可以在禁用之前保存它们的状态，并在启用时恢复它们的状态。

希望这个解决方法能够帮助到你！

0
0 Comments

如何禁用所有div内容

当我们想要禁用一个div及其内容时，很多人只关注表单元素的禁用方法。一个简单的方法是禁用鼠标交互，例如：

$("#mydiv").addClass("disabledbutton");

CSS

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

此外，还可以通过在脚本中添加以下代码来禁用输入框，确保无法通过键盘进行操作：

$([Parent Container]).find('input').each(function () {
     $(this).attr('disabled', 'disabled');
 });

非常感谢！我也一直在为在FF/Chrome中禁用div而苦恼。这个方法在IE、FF和Chrome中都很好用！

对于正确的答案点赞，你节省了我数小时的工作！眼泪在眼眶中打转，可能陷入了爱河。它也被所有浏览器支持：caniuse.com/#feat=pointer-events

然而，它无法禁止子元素（如div或textarea）的滚动。

虽然我知道现在有点晚了，但是它不支持IE 8、IE 9和IE 10。这里只是提醒大家一下：caniuse.com/#feat=pointer-events

这是一个非常有效的HTML5解决方案，因为div没有任何像enabled属性一样的东西。

这只能禁止鼠标事件，但是控件仍然是启用的。

注意：使用这个解决方案，你无法使用鼠标或触摸设备与元素及其子元素交互，但是你仍然可以使用键盘切换到它。

但是内容仍然可以滚动。

很高兴看到HTML5在2016年仍然比Flash/AS3落后了十年。仍然没有一种统一的方式来实现像AS3 InteractiveObject的mouseEnabled和mouseChildren属性那样的交互控制。CSS的'pointer-events'属性是否也包括其他用户交互事件，比如焦点控制？啊，是的，'focus'管理。另一个AS3绝对优于JavaScript的领域。

我觉得这个解决方案对我不起作用。是浏览器有特殊要求吗？我也不想隐藏元素，而是让屏幕变暗并且无法点击元素。

那使用Tab键呢？能够通过Tab键阻止焦点吗？可能不能。这不是一个解决方案。

pointer-events: none !important

也是有帮助的。在IE11中也可以工作。

虽然通过键盘仍然可以访问。

完全起作用。我还要补充一下，如果将以下代码添加到CSS中，效果可能会更好：

user-select: none;

这样，如果div内有可选择的项，它们将无法被选中。

我可以禁用所有鼠标事件，不仅仅是点击，还包括拖拽吗？

当我双击文本框或产生事件的div时，它不起作用。

对于一个简单而更优雅的解决方案点赞。其他方法，比如在stackoverflow上提到的stackoverflow.com/questions/8423812/...，并不起作用。

对我来说，这不是首选解决方案，因为你仍然可以通过键盘导航。

通过pointer-events:none，元素未被禁用。如果用户从浏览器的开发者控制台中删除pointer-events，他可以轻松地操作你的页面。添加disabled属性实际上会向后传递控件已被禁用的信号。不同的浏览器对待禁用控件的方式是不同的。例如，禁用的控件不会被提交。所以这是一个巨大的安全风险，不应该使用。

在我的情况下，我认为这样做还不错，因为我是在选中特定的单选按钮后使用这个设置。一旦选中了该单选按钮，我禁用的所有控件都是无效的。这只是帮助告诉用户。如果他们真的想通过Tab键切换到控件并在其中输入，他们可以，但是不会有任何作用。

输入框没有被禁用。表单提交可能仍然会出现问题。

0