0

I'd like to enable the textbox when it is clicked. However, when I click the textbox, nothing happens. I believe it is a problem with the jQuery selector. Why isn't this working?

<script>
    $(document).ready(function() {
        $(':input').click(function() {
            $(this).removeAttr('disabled');
        });
    });
</script>
<input type="text" value="123" disabled="disabled" />

Note: I tried both $('input') and $(':input') to select the textfield. Neither worked.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Nathan
  • 5,322
  • 5
  • 24
  • 24
  • 1
    Do you know if the function is being called? Try putting an alert statement in the function to see if it's being called in the first place. – codersarepeople Jan 11 '11 at 07:17
  • 1
    This is a duplicate of [Remove disabled attribute onClick of disabled form field](http://stackoverflow.com/questions/921161/remove-disabled-attribute-onclick-of-disabled-form-field). Long story short, disabled elements do not fire `click` events. – Klemen Slavič Jan 11 '11 at 07:19
  • Just curious, can you explain the use case for such behavior? – cesarsalazar Jan 11 '11 at 07:19

2 Answers2

9

A disabled input isn't going to fire events. Try changing from disabled to readonly.

leeny
  • 626
  • 3
  • 14
0

It has nothing to do with the selector you're using, but rather because, since the input element is disabled, the events for the input will not fire - see: http://www.jsfiddle.net/DvZDh/

<input type="text" value="123" disabled="disabled" />
<input type="text" value="123" />

The code works on the second input element, but not the first. A simple solution would probably be to use CSS to simulate the disabled state instead.

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136