Add onclick event to disabled field

Question

I am using a form a custom generator. The form is specified in a file, this file gets parsed and HTML elements will be generated by JSF 2.x programmatically, for example HtmlInputText by Apache MyFaces.

In our application we have a readonly user role. For those users we try to make all input options disabled . On input fields we are setting the html readonly attribute, for other elements, which have no readonly attribute like select fields, we are setting disabled attribute.

Unfortunately setting disabled=disabled will inactivate all javascript events too. Now, I need to trigger a javascript-function on click at a disabled option-field. How can I do this?

Answer 1

I don't think, there is much you can do about it.

though there is one, ugly solution to this.

place position:absolute non-disabled container over your disabled elements ie

<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>

where value of top and left for the container depends on the position of the select

see this fiddle

Answer 2

Wrap the disabled element in another element that supports the onclick attribute. A good example of this is the <h:panelGrid/>

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