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

Question

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, the 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?

Using jQuery You can check this: `$('#thisOneDoesnt').trigger('click');` — marioosh, Jul 21 '11 at 19:21
It's a workaround, but what about displaying the tooltip on `mouseenter`? — marc, Jul 21 '11 at 19:23
@marc , unfortunately, it looks like disabled checkboxes don't trigger *any* javascript events — ampersandre, Jul 22 '11 at 14:54

score 8 · Accepted Answer · answered Jul 22 '11 at 14:51

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.

score 0 · Answer 2 · edited Jun 04 '20 at 11:42

0

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
});

edited Jun 04 '20 at 11:42

Alessio

3,404
19
35
48

answered Jun 04 '20 at 10:14

Torstein Bratberg

1

score 0 · Answer 3 · answered Nov 23 '20 at 10:08

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')
     
      }

score 0 · Answer 4 · edited Jan 21 '14 at 18:14

0

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.

edited Jan 21 '14 at 18:14

Cory House

14,235
13
70
87

answered Jul 21 '11 at 19:20

George P

736
5
12

I'd think about wrapping `input` using `label`, but then I realized that it might not work, as `label` usually also pass the click event to the `input`. It is worth trying, though. – Denilson Sá Maia Jul 21 '11 at 19:47

score 0 · Answer 5 · answered Jul 21 '11 at 19:54

0

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

answered Jul 21 '11 at 19:54

Jason

51,583
38
133
185

marioosh · Answer 6 · 2011-07-21T19:55:12.233

-1

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;

edited Jul 21 '11 at 19:55

answered Jul 21 '11 at 19:41

marioosh

27,328
49
143
192

I know it's possible to programatically fire an onclick event for an element, but if I can't pick up any clicks on the checkbox, how will I know when to fire the onclick event? The demo you linked to simply fires the events. I need the events to fire, ONLY when the checkbox is clicked. That's the tricky part, I can't listen for clicks on the checkbox. – ampersandre Jul 21 '11 at 19:55
Oh, this alters the situation... I misunderstand. – marioosh Jul 21 '11 at 19:57

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

6 Answers6

The Fix

Internet Explorer

Linked