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: stackoverflow.com/questions/3100319/event-on-a-disabled-input Disabled input elements do not fire mouse events. — griffla
– griffla, Commented Apr 25, 2013 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
– Ian, Commented May 17, 2013 at 16:58

Community · Accepted Answer · 2017-05-23 12:14:13Z

(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.

Grant Thomas · Accepted Answer · 2013-04-25 15:18:03Z

3

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.

answered Apr 25, 2013 at 15:18

Grant Thomas

45.1k10 gold badges88 silver badges129 bronze badges

Comments

Justin Morgan · Accepted Answer · 2013-04-25 15:22:51Z

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, 2013 at 15:22

Justin Morgan

30.7k13 gold badges82 silver badges109 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:51:49Z

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, 2017 at 11:51

CommunityBot

11 silver badge

answered Nov 12, 2013 at 10:01

Dennis Golomazov

17.6k5 gold badges79 silver badges88 bronze badges

Collectives™ on Stack Overflow

jQuery click event on disabled checkbox not firing

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related