zoloft pills

Attaching events to disabled input elements

I encountered an issue that all the attached mouseover and mouseevent events on a disabled checkbox <input type=”checkbox” disabled=”disabled”/> failed to work. After verifying the issue from a few references, I confirmed that this is an expected behavior of a disabled form element (button, input, optgroup, option, select or textarea).

Many argued that if a form element is disabled, it should not trigger any event. However, for various reasons, I just need it to trigger certain events.

For example, I may want a tooltip to appear when you hover on a disabled field to explain why the field is disabled. This requires a mouseover element to be triggered upon mouseover.

My specific problem is a special one. The checkbox is in a drop-down menu, which disappears when the mouse cursor is moved outside of the menu area (via a mouseout event on the menu). However, when you hover on the checkbox, it is considered a mouseout event of the menu, and so the menu would disappear. One way to fix that is to set a variable (bHoverMenu) to true when you hover on the checkbox. The mouseout event of the menu does a brief time out to allow sufficient time for the checkbox’s mouseover event to set the value of the variable bHoverMenu. Eventually, the mouseout event of the menu checks for the variable bHoverMenu to determine if the menu needs to be closed. Obviously, there needs to be a mouseover event on the checkbox in order to set bHoverMenu to avoid falsely closing the menu.

Long story short, I just need events to function on my disabled form elements.

After some research, I found a solution from Dan G. Switzer, II. Basically, the solution is to “add an overlay over the disabled element which I’d use as the hotspot for mouse interaction. The overlay lays on top of the element and intercepts all mouse interaction.” This is a very neat solution, but I want a slightly simpler solution that requires less code and perhaps does less DOM manipulation if that’s possible.

readonly vs disabled

I then looked up the list of attributes that a form element takes, and noticed that “readonly” may be of use. Instead of using the “disabled” attribute, we can actually use “readonly”, which does not disable any events attached to the element.

However, “readonly” merely prevents users from changing the value of a form element, not from interacting with it, and so you can still alter the “checked” attribute of a checkbox even if “readonly” is set. I found another article that explains more about the differences between these two attributes.

To fix this issue, we only need to make sure that when the readonly attribute is set, the checkbox is always unchecked. The following piece of code in jQuery will do the job:

1
2
3
$('input').click(function(e) {
   if (this.readOnly) $(this).prop('checked', false);
});
1
 <input readonly="readonly" type="checkbox" />

And if your input element is wrapped by a label or some other container (such as a LI), you may do this

1
2
3
4
$('.wrapperClass').click(function(e) {
   var input = $(this).find('input');
   if (input[0].readOnly) $(input).prop('checked', false);
});

I think this is pretty compact and sweet. Similar code can be applied to other form fields with just a little adjustment.

Bonus: In Chrome, a disable checkbox looks exactly like a checkbox that is read-only. This is not true for all browsers, and it requires some styling to make it grey-out. In my opinion, this isn’t a critical issue as long as you have a label indicating the field is disabled and you have the code (from above) that disables any interaction on the checkbox.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
4 Responses
  1. don says:

    Having the same issue.
    However I want to use normal javascript to do this not jquery (long story), is there a way to go about this?

    a snippet of of what I have so far and trying to do

    ***********WHAT I HAVE SO FAR ********

    var chkBx = document.getElementsByTagName(“input”);

    if (map.getLevel() <= 8) {
    for (var i = 0; i < chkBx.length; i++) {
    if (chkBx[i].type == "checkbox" && (chkBx[i].id == "chkBoxA" || chkBx[i].id == "chkBoxB" || chkBx[i].id == "chkBoxC")) {
    chkBx[i].disabled = true;
    //onMouseOver( chkBx[i].alt) = "Zoom in to enable";
    }
    }
    }

    *********************************************

    As you can see a feeble attempt for MouseOver for the disabled checkBox

    **** TRY YOUR APPROACH************

    var chkBx = document.getElementsByTagName("input");

    if (map.getLevel() <= 8) {
    for (var i = 0; i < chkBx.length; i++) {
    if (chkBx[i].type == "checkbox" && (chkBx[i].id == "chkBoxA" || chkBx[i].id == "chkBoxB" || chkBx[i].id == "chkBoxC")) {
    chkBx[i].checked = false;
    chkBx[i].readonly = true;

    //onMouseOver( chkBx[i].alt) = "Zoom in to enable";
    }
    }
    }

    Any help will be very much appreciated.
    dON

  2. David says:

    Hi Don,
    It would be something like this… That should work if there is no typo

    // here you go
    function mkItReadOnly(obj) {
    obj.checked= false;
    obj.readonly= true;
    return false;
    }
    var chkBx = document.getElementsByTagName(“input”);
    if (map.getLevel() <= {
    for (var i = 0; i < chkBx.length; i++) { if (chkBx[i].type == "checkbox" && ({"chkBoxA":1,"chkBoxB":1,"chkBoxC":1})[chkBx[i].id]) { chkBx[i].addEventListener("click",function(){mkItReadOnly(this)}); chkBx[i].attachEvent(";onclick";,function(){mkItReadOnly(this)}); //onMouseOver( chkBx[i].alt) = "Zoom in to enable"; } } }

  3. Shanimal says:

    readonly=”readonly” doesn’t seem to work for checkboxes. At least in Firefox/Mac.

    $(“body”).append(‘<input type=”checkbox” readonly=”readonly” checked=”checked” />’)

  4. David says:

    As stated in my post, “readonly” merely prevents users from changing the value of a form element, not from interacting with it, and so you can still alter the “checked” attribute of a checkbox even if “readonly” is set. In your example, if you do $(‘input’).attr(‘value’), you will notice that it’s always on even if you uncheck the checkbox.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>