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

14

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

22,147
7
47
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,935
6
63
79

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/

Avichayil · Answer 5 · 2022-12-04T16:24:16.517

I actually do this quite often to stop people from changing checkboxes if those changes have already been committed to the database. However, if you want to change it or see a click at least.. then I just wrap the input in a label element and check the child input.

HTML :

<label class="checkbox-label">
    <input class="input-checkbox" type="checkbox" name="declared" disabled checked>
</label>

JQuery:

$('.checkbox-label').on(function (e) {
    e.stopPropagation();
    let checkBox = $(this).find('.input-checkbox');

    // if checkbox is disabled, do something

    if (checkBox.prop('disabled')) {
        // I usually put some enter password to confirm change... but I know you want to just show a click

        console.log('click')
    } else {
        // your checkbox should act as normal

        console.log('click')
    }
})

Hope this helps :)

How to detect .click() on disabled checkbox

5 Answers5

DEMO