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

I have a checkbox on a page that is disabled until some criteria is met.

In an effort to give the user some information, I'd like to have a 'tool tip' display when the user tries to click on the disabled checkbox. The problem I'm having is that I can't get the onClick event to trigger on the checkbox.

Here is some sample code:

<script>
    function notify() {
        alert("Hello");
    }
</script>

<input type="checkbox" onclick="notify();" id="thisOneWorks"/>
<input type="checkbox" onclick="notify();" id="thisOneDoesnt" disabled/>

When the checkbox is enabled, th开发者_StackOverflow中文版e onClick event will fire. When the checkbox is disabled, the onClick event will not fire.

My question is: How can I execute a function when a disabled checkbox is clicked?

I was looking through StackOverflow yesterday and found this solution in a question somewhere, but I now I can't find it again. When I find it, I'll link back to it.

The Fix

In order to capture clicks on a disabled checkbox, you can overlay a div above the disabled checkbox, and the div will receive all the 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 the div over the checkbox.

Internet Explorer

There's a bug in Internet Explorer, where the div is forced beneath the checkbox, and so the div can't receive click events because the checkbox blocks it. I've read that this happens because Internet Explorer treats the checkbox as an ActiveX control, and ActiveX controls get placed above all other elements.

In order to get around this Internet Explorer bug, we need to place a background on the div. I'm not sure why, but that causes the div to pop to the top. We can just create a transparent image and use it as the background for the div. I created a 1x1 transparent gif and set it as the background on the checkboxOverlay div:

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

Now it will work in Internet Explorer.

$('.mycontainer').delegate(':checkbox:disabled', 'click', function(e) {
    //do stuff
});

Try wrapping each input in a div and attaching the onclick to the div. On a side note, you'd probably want the tooltip to show on hover instead of on click. Take a look at YUI's event utility if you're not using a library.

If you don't want to wrap the checkbox in a div, then consider not diabling checkbox and modifying the built-in click event on the checkbox:

document.getElementById("checkboxId").addEventListener("click", function (event) {
   event.preventDefault();
   //The code you want to be run when the checkbox is clicked
});

In Angular 4+

.html ->


          <label class="round-check" (click)="validate()">
             <input  type="checkbox" [(ngModel)]="item.isChecked" [disabled]="true">
            <span> {{item.text}}</span>
          </label>


.ts ->



 validate(){
        
          this._toastr.warning('your warning msg')
     
      }

Using jQuery it is simple: $('#thisOneDoesnt').trigger('click'); Live demo here. Using clean javascript doesn't work: document.getElementById('thisOneDoesnt').click(); - i don't know why, but i'm working on it.

EDIT

In JavaScript You can enable, click and disable checkbox. Live demo here.

document.getElementById('thisOneDoesnt').disabled = false;
document.getElementById('thisOneDoesnt').click();
document.getElementById('thisOneDoesnt').disabled = true;