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 version is to show a fake form field in its place that "looks" like it's disabled (grayed out style) and onClick, hide it and show the correct field enabled, but that's ugly.

Example Code

This works:

<input type="text" id="date_end" value="blah" onClick="this.disabled=true;">

This works:

<label for="date_end_off" onClick="document.getElementById('date_end').disabled=false">Test</label>
<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>

This fails:

<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>

This fails:

<input type="text" id="date_end" value="blah" onClick="document.getElementById('date_end').disabled=false" disabled>

Sorry, but isn't it a bit strange, also for the user perspective to have a disabled field which enables when I click on it?? Why is it disabled then? — Juri, May 29 '09 at 07:08

score 10 · Answer 1 · answered May 29 '09 at 06:59

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:

Style the date fields to look as if they are disabled.
Make a hidden "use_date" form field with a bit value to determine whether to use the date fields during processing.
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.

score 7 · Answer 2 · answered Oct 03 '12 at 16:25

7

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.

answered Oct 03 '12 at 16:25

EoghanM

25,161
23
90
123

best solution, IMO. Though you probably want to be aware of the differences in behaviour: http://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-readonly-readonly-for-te – Dennis Golomazov Nov 12 '13 at 10:02

score 3 · Answer 3 · answered Jun 29 '09 at 12:41

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.

Does this actually work for you? It would be an elegant solution, but I tried it, and it doesn't work for me in Firefox: the enclosing element receives the click only when the input is enabled... — Bryan Larsen, Oct 27 '10 at 19:33

score 3 · Answer 4 · answered Nov 05 '09 at 13:34

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.

score 1 · Answer 5 · answered Oct 03 '13 at 10:42

1

I recently had a very similar problem and solved it by placing the input in a div and moving the onClick to the div.

<div onClick="myEnableFunction('date_end');">
<input type="text" id="date_end" value="blah" disabled>
</div>

answered Oct 03 '13 at 10:42

Mat Barnett

17
2

score 0 · Answer 6 · answered Sep 08 '11 at 12:31

0

You can add a div over the input that is disabled: check it out

 <div onclick="javascript:document.forma.demo1.disabled=false;" style="border:0px solid black; padding:00px;">
    <input type=text name="demo1" disabled style="width:30;">
  </div>

answered Sep 08 '11 at 12:31

Gerardo Abdo

1,150
3
10
16

score 0 · Answer 7 · edited May 23 '17 at 12:15

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

score 0 · Answer 8 · answered May 28 '09 at 14:37

0

Enabling a disabled element on click kind of defeats the purpose of disabling, don't you think? If you really want the behavior you're describing, just style it 'disabled' and remove those styles on click.

answered May 28 '09 at 14:37

Josef Pfleger

74,165
16
97
99

Draco · Answer 9 · 2009-05-28T14:53:30.780

Don't implement the logic of the onClick event in the onClick's value of the input field. That's probably why it's not working in Firefox. Instead define a function as the onClick's value. For example:

<input type="text" id="date_end" value="blah" onClick="doSomething()" disabled>

<script type="text/javascript">
  function doSomething()
  {
    alert("button pressed");
  }
</script>

It will also be worth looking into JQuery. You can use it to add or remove attributes from elements and all kinds of other stuff. For instance you can remove the disabled from the the input field by writing a function like this:

<script type="text/javascript">
      function doSomething()
      {
        alert("button pressed");
         $("#date_end").removeAttr('disabled'); //removes the disabled attribut from the  
                                                //element whose id is 'date_end'
      }
</script>

OR you can add it as follows:

$("#date_end").attr('disabled','true');

The Jquery site is here

I actually tried these methods as well with no luck. It's as if the browser completely ignores onClick on a field if disabled. — iamgoat, May 29 '09 at 06:45

score 0 · Answer 10 · edited Oct 26 '12 at 07:08

0

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.

edited Oct 26 '12 at 07:08

Prasad Jadhav

5,090
16
62
80

answered Mar 12 '12 at 19:33

J. Allen

620
5
12

Remove disabled attribute onClick of disabled form field

10 Answers10

Linked