javascript - How can I execute a function when a disabled checkbox is clicked? -


i have checkbox on page disabled until criteria met.

in effort give user information, i'd have 'tool tip' display when user tries click on disabled checkbox. problem i'm having can't onclick event trigger on checkbox.

here sample code:

<script>     function notify() {         alert("hello");     } </script>  <input type="checkbox" onclick="notify();" id="thisoneworks"/> <input type="checkbox" onclick="notify();" id="thisonedoesnt" disabled/> 

when checkbox enabled, onclick event fire. when checkbox disabled, onclick event not fire.

my question is: how can execute function when disabled checkbox clicked?

i looking through stackoverflow yesterday , found solution in question somewhere, can't find again. when find it, i'll link it.

the fix

in order capture clicks on disabled checkbox, can overlay div above disabled checkbox, , div receive onclick events (demo here):

<style type="text/css">   .checkboxwrapper {     position: relative;   }   .checkboxoverlay {     position: absolute;     left: 0;     right: 0;     top: 0;     bottom: 0;   } </style>  <script type="text/javascript">   function notify() {     alert("hello");   } </script>  <span class="checkboxwrapper">   <input type="checkbox" disabled/>   <div class="checkboxoverlay" onclick="notify();"></div> </span> 

this places div on checkbox.

internet explorer

there's bug in internet explorer, div forced beneath checkbox, , div can't receive click events because checkbox blocks it. i've read happens because internet explorer treats checkbox activex control, , activex controls placed above other elements.

in order around internet explorer bug, need place background on div. i'm not sure why, causes div pop top. can create transparent image , use background div. created 1x1 transparent gif , set background on checkboxoverlay div:

  .checkboxoverlay {     position: absolute;     left: 0;     right: 0;     top: 0;     bottom: 0;     background: url(img/transparent.gif) repeat;   } 

now work in internet explorer.


Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -