Show alert message when clicking on disabled text box

Question

I want to check whether the textbox is disabled or not. If we try to click on the disabled textbox. It should show an alert message.

This is my model code :

var isDisabled = $("#Travellerpaymentinfo_cc_number").prop('disabled');
if(isDisabled==1)
{
    $("#Travellerpaymentinfo_cc_number").click(function(){
      alert("The textbox is clicked.");
    });
}

Well, i have no idea how this is related to php, but i think - i just think - you cant bind the `click` event onto a disabled element. Just a thought of mine. — Realitätsverlust, May 13 '14 at 12:36
There is no way to capture a click on disabled elements. Your best bet is to react to a specific class on the element. You can refer here : http://stackoverflow.com/questions/16109228/clicking-a-disabled-input-or-button . Regards — super cool, May 13 '14 at 12:47

score 4 · Accepted Answer · answered May 13 '14 at 12:42

4

Since disabled control elements can't have events bound to them, you'd need to bind an event to an ancestor element and make a check to see whether the target was the input.

You can then go on to check if it's disabled, and if so, show your alert:

$(document).on('click',function(e){
    if(e.target.id == "Travellerpaymentinfo_cc_number" && e.target.disabled){
        alert("The textbox is clicked.");
    }
});

JSFiddle

answered May 13 '14 at 12:42

George

36,413
9
66
103

The above code is not working for me.Is there any other way friends. – Sasikumar May 13 '14 at 12:56
@QuestSasi it should work. What browser and did you use the code exactly like it is here? – epascarello May 13 '14 at 13:03
@epascarello I have used the above code as is but it is not working. I am using YII framework. Will it affect ? I am using firefox latest version. – Sasikumar May 13 '14 at 13:21
@QuestSasi Your right, it doesn't work in Firefox. Seems the event doesn't propagate from a disabled element. It's tempting to ask a question.. – George May 13 '14 at 13:24
Check out this work-around: http://stackoverflow.com/a/3100395/1612146 – George May 13 '14 at 13:33

score 2 · Answer 2 · answered May 13 '14 at 12:45

Events do not work on disabled elements, you can do this as a workaround

HTML

Add readOnly attribute

<textarea id="Travellerpaymentinfo_cc_number" class="disabled" readonly="true"></textarea>

CSS

Make it look disabled with css

.disabled{
    background:lightgrey;    
}

jQuery

You can put the if statement in the click event like this

$("#Travellerpaymentinfo_cc_number").click(function () {
    if (this.readOnly) {
        alert("The textbox is clicked.");
    }
});

DEMO

score 0 · Answer 3 · answered May 13 '14 at 12:46

If you have your conroll disabled, also the events which you can fire are disabled. One possible thing you can do is, that you set the textbox to readonly, so you can fire events if someone clicks it

<input type="text" id="textbox" readonly="true" />

$(document).ready(function(){
    $('#textbox').click(function(){
        alert("not allowed");
    });
});

albert Jegani · Answer 4 · 2014-05-13T13:08:38.210

-3

$(document).click(function (e) {
  if ($("#"+e.target.id).prop('disabled') && e.target.id=="Travellerpaymentinfo_cc_number"){
    alert("The textbox is clicked. ");
  }
});

isDisabled is only a Boolean(True or False)

edited May 13 '14 at 13:08

answered May 13 '14 at 12:40

albert Jegani

462
5
15

Learn about truthy values `alert(true==1)` – epascarello May 13 '14 at 12:42
first run above code and give comment – albert Jegani May 13 '14 at 12:43
if u say wrong...just say where its wrong – albert Jegani May 13 '14 at 12:46
3

Dude, `if (true)` and `if(true==true)` and if `(true==1)` produce the same result. – epascarello May 13 '14 at 12:46
The problem is the fact that you can not click on a disabled input and receive a click event by a handler bound to that control. – epascarello May 13 '14 at 12:49
1

After your edit: Still not going to work. $(this) is the document, not the element. – epascarello May 13 '14 at 12:58
thanks dude...just now i understand the problem – albert Jegani May 13 '14 at 13:11

Show alert message when clicking on disabled text box

4 Answers4