Remove disabled attribute onClick of disabled form field

Question

I have a form field that starts out disabled and has an onClick to enable it. The onClick doesn\'t fire (at least in FF) nor does a simple alert(1);.

The hacky vers

Answer 1

Using jQuery, I attach an event handler to the parents of my input controls.

<script type="text/javascript">
    $(function() {
        // disable all the input boxes
        $(".input").attr("disabled", true);

        // add handler to re-enable input boxes on click
        $("td:has(.input)").click(function() {
            $(".input", this).removeAttr("disabled");
        });
    });
</script>

All of my input controls have the class "input" and they exist in their own table cells. If you at least wrapped your input tags in a div, then this should work without a table as well.

Answer 2

If you simply want to prevent the user from typing data in your field, but instead want the field to populate on an event, my hack solution was to not disable the input field at all, but instead after running my onclick or onfocus functions, to call blur() so the user can not edit the field.

Answer 3

I came across this thread in another forum so I assume I'll have to go about it a different way.

http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled. Any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree. Correct me if I'm wrong, but if you click on the disabled button, the source of the event is the disabled button and the click event is completely wiped out. The browser literally doesn't know the button got clicked, nor does it pass the click event on. It's as if you are clicking on a black hole on the web page.

Work around:

1. Style the date fields to look as if they are disabled.
2. Make a hidden "use_date" form field with a bit value to determine whether to use the date fields during processing.
3. Add new function to onClick of the date fields which will change the style class to appear enabled and set the "use_date" value to 1.

Answer 4

In order to enable a disabled element on the client side, lets say in response to a checkbox checked or something, I ended up having to use a combination of JS and jQuery, see below:

//enable the yes & no RB 
function enable()
{
        var RBNo = "rbnBusinessType";
        var RBYes = "rbnBusinessType";

        //jQuery approach to remove disabled from containing spans            
        $("#" + RBYes).parent().removeAttr('disabled');
        $("#" + RBNo).parent().removeAttr('disabled');

        //enable yes and no RBs
        document.getElementById(RBYes).disabled = false;
        document.getElementById(RBNo).disabled = false;               

}

After postback then, you'll need to access the request like the following in order to get at the values of your client side enabled elements:

this._Organization.BusinessTypeHUbZoneSmall = Request.Params["rbnBusinessTypeHUbZoneSmall"] == rbnBusinessTypeHUbZoneSmallYes.ID;

Inspiration taken from: https://stackoverflow.com/questions/6995738/asp-javascript-radiobutton-enable-disable-not-included-in-postback-ajax for more information

Answer 5

Use readonly instead of disabled

For checkboxes at least, this makes them look disabled but behave normally (tested on Google Chrome). You'll have to catch the click and prevent the default action of the event as appropriate.

Answer 6

Citing Quirksmode.org:

"A click event on a disabled form field does not fire events in Firefox and Safari. Opera fires the mousedown and mouseup events, but not the click event. IE fires mousedown and mouseup, but not click, on the form. All these implementations are considered correct."

Quirksmode's compatibility table is great to find out more about such problems.