10

我最近在很多网站上都看到过这种做法，但似乎无法找到。本质上，我想在单击按钮时“禁用”整个面板（即 HTML 表格中的表单）。

通过禁用我的意思是我不希望表格中的表单元素可用并且我希望表格淡出。

我已经能够通过在桌子上放置一个“面纱”来实现这一点，它有一个绝对定位的 div，该 div 具有白色背景和低不透明度（所以你可以看到它后面的表格，但不能点击任何东西，因为 div在它前面）。这也增加了我想要的褪色效果。但是，当我将面纱的高度设置为 100% 时，它只会达到我的屏幕大小（不包括滚动），所以如果用户向上或向下滚动，他们会看到面纱的边缘，这并不漂亮。

我假设这通常以不同的方式完成。有没有人有一些建议作为更好的方法来实现这一点？

4

6 回答 6

8

你可以尝试像这样的javascript：

function disable(table_id)
{
    var inputs=document.getElementById(table_id).getElementsByTagName('input');
    for(var i=0; i<inputs.length; ++i)
        inputs[i].disabled=true;
}
于 2010-04-30T06:45:53.170 回答
3

使用 Jquery 尝试以下操作

$("#freez").click(function(){
    $('#tbl1').find('input, textarea, button, select').attr('disabled','disabled');
});
$("#unfreez").click(function(){
    $('#tbl1').find('input, textarea, button, select').removeAttr("disabled");
});
于 2012-01-04T11:03:38.850 回答
1

也可以使用pointer-events CSS 样式来禁用 HTML 表格的内部元素，如下所示：

table[disabled], table[disabled] input { pointer-events: none }

在我们的 JavaScript 代码逻辑中的任何需要的点，我们可以disabled向父表添加属性，如下所示，这将使 CSS 样式生效：

let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);
于 2019-01-11T10:20:01.820 回答
0

如果我错了，请有人纠正我，但我已经看到了 Javascript 和一些派生的 Javascript 库，它们有很多选项可以完成你想做的事情。我已经使用 jQuery 库做了一些类似的效果。

要考虑的一件事是您到底要禁用什么。本质上，表格不是交互式的，因此禁用表格不会有太大的作用。如果它是要禁用的表中的表单元素。您可以使用 JavaScript 完成此操作。

除了使用 JavaScript 禁用表单元素外，您还可以使用它来更改非交互式元素的属性。

这方面的一个示例是使用 JavaScript 更改表格中的字体和边框以及其他非交互元素的颜色，以提供被禁用的“外观”。当然，您仍然需要使用 JavaScript 来禁用表单元素。

于 2010-04-30T06:43:19.500 回答
0

你不能用 JavaScript 找出区域的高度（以像素为单位）吗？然后将面纱的高度设置为那个数字？

我脑子里没有确切的代码，但 offsetHeight 可能会奏效

于 2010-04-30T06:44:12.103 回答
0

另一种方法是使用 opacity 属性。

function disablePanel(id) {
   var panel = document.getElementById(id);
   var inputs = panel.querySelectorAll('input, button'); //anything else can go in here
   for (var i=0; i<inputs.length; i++) {
      inputs[i].disabled = true;
   }

   panel.style.opacity = 0.3; //or any other value
}
于 2020-06-02T18:47:56.637 回答