Can't get .click() to work on a disabled textarea

Question

I'm using jQuery. I have a disabled textarea: <textarea id="textarea" disabled="disabled"></textarea>. I want to make it so that when a user clicks on the textarea, it will do something, such as an alert box. So, I have $('#textarea').click(function() { alert('Test'); });.

However, this only works when the textarea is not disabled. So, how can I make the click event fire even when the textarea is disabled?

Possible duplicate of http://stackoverflow.com/questions/3100319/jquery-event-on-a-disabled-input — Oliver Tappin, Jul 29 '12 at 18:20

score 11 · Answer 1 · answered Jul 29 '12 at 18:23

11

instead of disabled="disabled" why not use readonly, readyonly is alomst same as disabled and the click event will works

answered Jul 29 '12 at 18:23

mgraph

15,238
4
41
75

1

True, and you can even style readonly textarea's to look like its disabled. +1 – Shawn31313 Jul 29 '12 at 18:25

score 5 · Accepted Answer · edited May 23 '17 at 11:48

Instead of disabling it, you could either try simulating the disabled behaviour with CSS and continue receiving mouse events from it.

Or see this answer Event on a disabled input where Andy E shows how you can place an invisible element (an overlay) on top of the input for receiving those mouse events when the input is disabled.

He removes the overlay and enables the input when it is clicked, but you could change the behavior to anything you'd like.

adeneo · Answer 3 · 2012-07-29T19:12:02.960

2

Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements. However, Firefox doesn't exhibit this behaviour, it just does nothing at all when you click on a disabled element.

You could do something like:

$(document).on('click', function(e) { 
    if (e.target.id === 'textarea') alert('works');
});

FIDDLE

But it's probably not cross-browser!

Another, and possible better way to do it, is to place another element on top of the disabled one and catch events on that element, something like :

var t = $("#textarea"),
    over = $('<div</div>');
    over.css({
        position: "absolute",
        top: t.position().top,
        left: t.position().left,
        width: t.outerWidth(),
        height: t.outerHeight(),
        zIndex: 1000,
        backgroundColor: "#fff",
        opacity: 0
    });

t.after(over);

$(over).on('click', function() { 
    alert('works');
});

FIDDLE

edited Jul 29 '12 at 19:12

answered Jul 29 '12 at 18:21

adeneo

312,895
29
395
388

1+ Very nice and simple solution. – Shawn31313 Jul 29 '12 at 18:23
You will need to specify an explicit value for top and left in the CSS for the textarea for `t.css("left"|"top")` to work as intended. Try `.offset()` or setting left and top to 0px and applying `position: relative` to the container of the textarea. – Charlie Rudenstål Jul 29 '12 at 18:48
@CharlieRudenstål - There are ways around almost anything, just did'nt feel like spending more time on it. Edited my answer, should work in all browsers, and with most styles etc. – adeneo Jul 29 '12 at 19:12
Ah. It wasn't my intent to disparage your answer. Was more of a hint to the OP than anything else. I'm actually about to upvote this solution. – Charlie Rudenstål Jul 29 '12 at 19:35

score 1 · Answer 4 · answered Jul 29 '12 at 18:18

1

Disabled elements don't fire click events. That's part of them being disabled.

answered Jul 29 '12 at 18:18

Niet the Dark Absol

320,036
81
464
592

score 0 · Answer 5 · answered Jul 29 '12 at 18:26

0

You cant fire click event from disabled elements, though you can set the value e-g:

http://jsfiddle.net/j6tdn/28/

answered Jul 29 '12 at 18:26

defau1t

10,593
2
35
47

Can't get .click() to work on a disabled textarea

5 Answers5