Geek Answers Handbook

JQuery click event on disabled checkbox not working

I have a list of checkboxes and I'm trying to limit to 2 max checkboxes by disabling all checkboxes without a mark after 2 were selected.

This works fine, but I try to display a message to the user if they click on the disabled checkbox to tell them why they cannot select more than 2. I try to fire the click() event on the disabled checkbox, but it actually doesn't 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!"); });
+4
source share
4 answers

(from my answer in How to disable / enable the checkbox with the right mouse button in chrome and firefox )

You can stack a transparent element on top of it (so the user cannot see it), the same size / shape and listen for this click event. When it is turned on, hide this complex element.

Here you can start: 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 "click" disable elements.

Technically, you can just use the parent <span> - give it a special class and listen for click events on this. Events will bubble from his descendants, so this should be good.

+3
source

Disabled items do not receive events because they are completely disabled.

You would have to pretend that everything was disabled using CSS and JavaScript itself. This way you can apply styles, including pointers (or lack), to simulate a disabled state and still receive events. You can also overlay elements on another element and listen to events on this thing.

+3
source

It does not fire a click event because it is disabled. You can address this by temporarily overlaying it on another element and processing onclick overlay. Otherwise, you just have to smooth it with the style to make it look disabled.

0
source

readonly may help, because events will be fired. Although remember the differences in behavior .

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

More articles:


All Articles