html - 避免在 "disabled"表行上进行用户交互

Question

我有一个 HTML 表格，其中的一些行“禁用”。我想清楚地向用户展示它，所以我对 tr 应用了一个模糊过滤器，有一个像这样的表格:

注意:https://stackblitz.com/edit/angular-cdypks 上有一个活生生的例子.

问题在于，尽管它看起来已禁用，但用户仍然可以与之交互，选择文本并单击选择输入。另外，有些单元格是可以放置对象的可放置区域，所以我想避免它。

我不想使用 Javascript，所以我想知道是否有办法在禁用的 tr 或类似的东西前面放置一个透明的 DIV...

谢谢!

Answer 1

如果你想禁用某行，你可以对这一行使用pointer-events: none。它会阻止您行中的任何鼠标事件。

tr.disabled{
  pointer-events: none;
}