将 onclick 事件添加到禁用字段答案

【问题标题】：Add onclick event to disabled field将 onclick 事件添加到禁用字段
【发布时间】：2013-04-11 08:56:12
【问题描述】：

我正在使用自定义生成器的表单。表单在文件中指定，该文件被解析，HTML 元素将由 JSF 2.x 以编程方式生成，例如 Apache MyFaces 的 HtmlInputText。

在我们的应用程序中，我们有一个只读用户角色。对于这些用户，我们尝试将所有输入选项设置为disabled。在input 字段上，我们设置html readonly 属性，对于没有readonly 属性的其他元素，例如select 字段，我们设置disabled 属性。

不幸的是，设置 disabled=disabled 也会使所有 javascript 事件失效。现在，我需要在禁用的选项字段中触发 javascript 函数 on click。我怎样才能做到这一点？

【问题讨论】：

这些选择字段顶部的不可见 div，并将单击绑定到该 div，或者删除禁用状态使其不可更改？例如，即使您使用鼠标或键盘更改它，也使其保持在选定的选项上。只是一些快速的想法

标签： javascript html jsf onclick

【解决方案1】：

将禁用的元素包装在另一个支持 onclick 属性的元素中。 <h:panelGrid/>

就是一个很好的例子

   <h:panelGrid style="width=20px" onclick="foo.myBar()">  
      <h:someComponent disabled="true"/>
   </h:panelGrid>

【讨论】：

【解决方案2】：

我不认为，你可以做很多事情。

虽然有一个丑陋的解决方案。

将position:absolute non-disabled 容器放在已禁用的元素上，即

<select disabled="disabled" >
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>
<div onclick="alert('s')" 
  style="width:56px;position:absolute; top:1.7%; left:1.6%;height:18px;" >
</div>

容器顶部和左侧的值取决于选择的位置

看到这个fiddle

【讨论】：