Question

我在网站上工作，用户创建一些表格，由其他用户填写。

我有dropdown（下图），用户可以选择为其他用户生成哪种输入：

这是格鲁吉亚语单词，因此意味着文字，数字， 选择（是 - 否），选择，大文，文件，照片

所以我想写一下change事件，它为这个用户绘制了一个由另一个用户填充的表单元素。例如，如果用户选择选择（是 - 否） [ასარჩევი（კი-არა）]，

<select>
        <option>კი<option>
        <option>არა<option>
</select>

将被绘制。但是这个选择应该像图像一样被冻结。它仅用于创建from的用户的可视化，以查看如何为填充它的用户显示它。

如果我假设这一切，我怎么能创建一些完全禁用的html，但它看起来不像是禁用。

如何使用 javascript-jquery 实现此目的？

Answer 1

将css样式pointer-events: none添加到要禁用鼠标交互的任何输入上。

CSS：

.display-only {
  pointer-events: none;
}

HTML：

<select class="display-only">
        <option>კი<option>
        <option>არა<option>
</select>

Answer 2

IE11仅支持

pointer-events。这是一个非常好的解决方案，但如果像我一样你需要更广泛的支持，你可以在控件前添加一个不可见的div。由于此新div不是点击，因此没有与控件的交互。

虽然这可以通过控件容器的:after伪元素来实现，但它仍会在IE10中引起问题。