Show alert message when clicking on disabled text box [duplicate]

Question

This question already has answers here:

Event on a disabled input (12 answers)

Closed 9 years ago.

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.");
    });
}

Answer 1

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

Answer 2

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

Answer 3

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");
    });
});

Answer 4

$(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)