How to detect .click() on disabled checkbox

Question

js/jQuery:

$('input[type=checkbox]').click(function(){
  // Does not fire if I click a <input type="checkbox" disabled="disabled" />
});

How do I make something happend in jQuery when someone clicks a disabled checkbox?

If the checkbox is disabled, the click event doesn't get fired. Can you use `readonly` instead of `disabled`? — João Silva, Sep 16 '12 at 16:08
Possible duplicate of : http://stackoverflow.com/questions/3100319/event-on-a-disabled-input The answer in that post uses an element surrounding the input control as well as a secondary control which intercepts the click event which than can be used to trigger your actual click event. You still can do `$('input[type=checkbox]').click()` to trigger the click event programmatically even if the input is disabled. — Nope, Sep 16 '12 at 16:08
@JoãoSilva: Using `readonly="true"` greys out the control but still lets the user check/uncheck it. In Chrome anyway. — Nope, Sep 16 '12 at 16:13

Nope · Accepted Answer · 2012-09-16T16:35:43.837

12

Reading over the comment again regarding using readonly from JoãoSilva. You could use that and connect it with some logic in the click event.

Using readonly gives you the disabled look, just like disabled does but it still lets you click it.

Use readonly like this:

<input type="checkbox" readonly="readonly">

Then in your script cancel the event if readonly is set.

$('input[type=checkbox]').click(function() {
    var isReadOnly = $(this).attr("readonly") === undefined ? false : true;

    if (isReadOnly) {
        return false;
    }

    // other code never executed if readonly is true.
});

DEMO

edited Sep 16 '12 at 16:35

answered Sep 16 '12 at 16:18

Nope

21,907
7
45
72

1

This should be the chosen answer. It provides the desired functionality, and is least hacky. – Jezen Thomas Sep 16 '12 at 16:22
`readonly` should be specified with either no value or the value `readonly`, i.e. `readonly="readonly"`, not `true`. – Barmar Sep 16 '12 at 16:22
@Barmar: I fixed that now and added a DEMO. Thank you. – Nope Sep 16 '12 at 16:36
Isnt readonly a property? If so, it could be simplified like: if ($(this).prop('readonly')) return false; – Lilleman Sep 16 '12 at 18:06
1

@Lilleman: I used `attr` as I didn't know what version of jQuery you had. `prop` was added in 1.6 so, yes, you are correct if you are using at least 1.6 the relevant line can be changed to `var isReadOnly = !$(this).prop("readonly");` and code still works. – Nope Sep 16 '12 at 18:25
? If I set readonly on a checkbox, it is still check-able. http://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly – Don Cheadle Apr 04 '16 at 16:29

score 9 · Answer 2 · edited May 23 '17 at 11:59

9

You will not be able to capture the click event reliably across all browsers. Your best bet is to place a transparent element above to capture the click.

HTML

<div style="display:inline-block; position:relative;">
  <input type="checkbox" disabled="disabled" />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>

JavaScript

$(':checkbox:disabled').next().click(function(){
    var checkbox = $(this.prevNode);
    // Does fire now :)
});

Note: This is an idea from this question which I improved on.

edited May 23 '17 at 11:59

Community

1
1

answered Sep 16 '12 at 16:11

iambriansreed

21,534
6
59
78

Its not exactly what I want, but this solves my problem, so I will accept it in a minute when I can. :) – Lilleman Sep 16 '12 at 16:17
@Lilleman If you want a cross browser solution it's the best you can do. Glad I could help. – iambriansreed Sep 16 '12 at 16:18
@ianpgall the title of the OP is "How to trigger .click() on disabled checkbox" – iambriansreed Sep 16 '12 at 22:29
1

@ianpgall This conversation doesn't help the community or the OP. Please stop trolling. Thanks. – iambriansreed Sep 16 '12 at 22:36

score 1 · Answer 3 · answered Sep 16 '12 at 16:15

You can't...but you can fake it by placing a div over the input with a transparent background, and define the click function on that div.

$('input').each(function(){
    if(true == ($(this).prop('disabled'))){
        var iTop = $(this).position().top;
        var iLeft = $(this).position().left;
        var iWidth = $(this).width();
        var iHeight = $(this).height();
    $('body').append('<div class="disabledClick" style="position:absolute;top:'+iTop+'px;left:'+iLeft+'px;width:'+iWidth+'px;height:'+iHeight+'px;background:transparent;"></div>');    
    }       
});

//delegate a click function for the 'disabledClick'.


$('body').on('click', '.disabledClick', function(){
   console.log('This is the click event for the disabled checkbox.');
});

Here's the working jsFiddle

VisioN · Answer 4 · 2012-09-16T16:16:54.743

I see no other option as to add <div> block layer over the checkbox. So the solution should be the following:

function addDisabledClickHandler(el, handler) {
    $("<div />").css({
        position: "absolute",
        top: el.position().top,
        left: el.position().left,
        width: el.width(),
        height: el.height()
    }).click(handler).appendTo("body");
}

var el = $("input[type='checkbox']");
addDisabledClickHandler(el, function() {
    alert("Clicked");
});

DEMO: http://jsfiddle.net/q6u64/

How to detect .click() on disabled checkbox

4 Answers4

DEMO