Jquery event on a disabled input

Question

Aparently a disabled input is not handled by any event (am I wrong ?)

Is there a way to work arround this problem ?

<input type="text" disabled="disabled" name="test" value="test" />

$(':input').click(function () {
  $(this).removeAttr('disabled');
})

Here I need to click on the input to enable it. But if I don't activate it, the input should not be posted

Answer 1

Disabled elements don't fire mouse events at all. I can't think of a better solution, but you could place an element in front of the input, and catch the click on that element. Here's an example of what I mean, it's not valid HTML though and it will need tweaking a bit:

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

jq:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").attr("disabled", false).focus();
});​

Example: http://jsfiddle.net/RXqAm/

Answer 2

hm.. maybe you could make the field readonly and on submit disable all readonly fields

$(".myform").submit(function(e) {
    $("input[readonly]", this).attr("disabled", true);
});

and the input (+ script) sould be

<input type="text" readonly="readonly" name="test" value="test" />

$('input[readonly]').click(function () {
    $(this).removeAttr('readonly');
})

Answer 3

Here is a good alternative http://blog.pengoworks.com/index.cfm/2010/4/23/Attaching-mouse-events-to-a-disabled-input-element