jQuery click event on disabled checkbox not firing

Question

I have a list of checkboxes and i'm trying to limit to 2 maximum checkboxes by disabling all unchecked checkboxes after 2 have been selected.

This works fine, but i'm trying to display a message to the user if they click on a disabled checkbox to let them know why can't select more than 2. I'm trying to fire a click() event on a disabled checkbox but it doesn't actually fire. Any ideas?

    var totalChecked = 0;
    var checkedLimit = 1;

    jQuery(".post-to-facebook").change(function() {
        if (jQuery(this).attr("checked") == "checked") {
            if (totalChecked < checkedLimit) {
                totalChecked += 1;

                if (totalChecked == checkedLimit) {
                    jQuery(".post-to-facebook[checked!='checked']").attr("disabled", true);
                }
            } else {
                jQuery(this).attr("checked", false);

                alert("You can only post twice to Facebook at one time. This is to avoid spam complaints, we don't want to spam on your page!");
            }
        } else {
            totalChecked -= 1;

            if (totalChecked < checkedLimit) {
                jQuery(".post-to-facebook[checked!='checked']").attr("disabled", false);
            }
        }
        console.log(totalChecked);
    });

    // THIS DOES NOT FIRE
    jQuery(".post-to-facebook:disabled").click(function() {
        alert("You can only post twice to Facebook at one time. This is to avoid spam complaints, we don't want to spam on your page!");
    });

Take a look at this: http://stackoverflow.com/questions/3100319/event-on-a-disabled-input Disabled input elements do not fire mouse events. — griffla, Apr 25 '13 at 15:17
Possible duplicate: http://stackoverflow.com/questions/6781467/how-can-i-execute-a-function-when-a-disabled-checkbox-is-clicked — emerson.marini, Apr 25 '13 at 15:17
@Wasim Did you end up figuring out how to handle this? If so, accept an answer, or explain what's happening or how we can help — Ian, May 17 '13 at 16:58

score 3 · Answer 1 · answered Apr 25 '13 at 15:18

Disabled elements don't receive events since they're entirely disabled.

You would need to pretend things were disabled with CSS and JavaScript itself. In this way you can apply styles, including pointers (or lack of), to mimic a disabled state and yet still receive events. You could also overlay the elements with another element and listen to events on that thing.

score 3 · Accepted Answer · edited May 23 '17 at 12:14

(from my answer at How to disable/enable a checkbox on right-click in chrome and firefox )

You could stack a transparent element on top of it (so the user can't see it), same size/shape, and listen for that click event. When it's enabled, hide that stacked element.

Here's something to get you started: http://jsfiddle.net/8dYXd/4/

It uses this structure:

<span>
    <input id='a' type='checkbox' disabled="disabled" />
    <span class="disabled-detector"></span>
</span>

And this CSS:

span {
    position: relative;
}

span.disabled-detector {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
}

input+span.disabled-detector {
    display: none;
}

input[disabled]+span.disabled-detector {
    display: inline;
}

Notice how you can still "click" on disabled elements.

Technically, you could just use the parent <span> - give it a special class, and listen for click events on that. The events will bubble up from its descendants, so that should be fine.

score 0 · Answer 3 · answered Apr 25 '13 at 15:22

0

It's not firing a click event because it's disabled. You could address this by temporarily overlaying it with another element and handling the onclick of the overlay. Otherwise, you'll have to just gray it out with styling so that it only looks disabled.

answered Apr 25 '13 at 15:22

Justin Morgan - On strike

30,035
12
80
104

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

Making the checkbox readonly can help, because the events will be fired. Though be aware of the differences in behaviour.

<input type="checkbox" name="yourname" value="Bob" readonly="readonly" />

edited May 23 '17 at 11:51

Community

1
1

answered Nov 12 '13 at 10:01

Dennis Golomazov

16,269
5
73
81

jQuery click event on disabled checkbox not firing

4 Answers4