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
– marioosh, Commented Jul 21, 2011 at 19:21
It's a workaround, but what about displaying the tooltip on mouseenter? — marc
– marc, Commented Jul 21, 2011 at 19:23
@marc , unfortunately, it looks like disabled checkboxes don't trigger any javascript events — ampersandre
– ampersandre, Commented Jul 22, 2011 at 14:54

ampersandre · Accepted Answer · 2011-07-22 14:51:26Z

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.

Jason · Accepted Answer · 2011-07-21 19:54:09Z

0

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

answered Jul 21, 2011 at 19:54

Jason

52.7k38 gold badges139 silver badges188 bronze badges

Comments

Cory House · Accepted Answer · 2014-01-21 18:14:58Z

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, 2014 at 18:14

Cory House

15.2k13 gold badges75 silver badges89 bronze badges

answered Jul 21, 2011 at 19:20

George P

7365 silver badges12 bronze badges

1 Comment

Denilson Sá Maia Over a year ago

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.

Alessio · Accepted Answer · 2020-06-04 11:42:15Z

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 4, 2020 at 11:42

Alessio

3,70620 gold badges42 silver badges52 bronze badges

answered Jun 4, 2020 at 10:14

Torstein Bratberg

1

Comments

Shashwat Gupta · Accepted Answer · 2020-11-23 10:08:51Z

0

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

answered Nov 23, 2020 at 10:08

Shashwat Gupta

5,31845 silver badges33 bronze badges

Comments

marioosh · Accepted Answer · 2011-07-21 19:55:12Z

-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, 2011 at 19:55

answered Jul 21, 2011 at 19:41

marioosh

28.8k50 gold badges149 silver badges196 bronze badges

2 Comments

ampersandre Over a year ago

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.

marioosh Over a year ago

Oh, this alters the situation... I misunderstand.

Collectives™ on Stack Overflow

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

6 Answers 6

The Fix

Internet Explorer

Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

The Fix

Internet Explorer

Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related