jQuery click event on disabled input field

Question

I want to trigger an event on a disabled input. I have tried the following code, nothing happened - there was no error, the even just didn't fire.

$(document).on('click', '.select-row', function(e){
    ...
});

How do I fix this?

Answer 1

You can't fire any mouse event like click on a disabled HTML element. Alternative of this, is to wrap up the element in a span or div and perform the click event on those.

$("div").click(function (evt) {
  // do something
});​

One more alternate is to make the element readonly instead of disabled, but bear in mind that jQuery does not have a default :readonly selector.

Answer 2

If it works for you, you may use readonly instead of disabled. Then you can use the click event with ease.

Demo

Answer 3

We had today a problem like this, but we didn't wanted to change the HTML. So we used mouseenter event to achieve that

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, '.select-row');

Answer 4

This my solution

<div class="myInput"><input type="text" value="" class="class_input" disabled=""></div>

Jquery:

$("body").on("click", ".myInput", function(e) {
  if($(e.target).closest('.class_input').length > 0){
     console.log('Input clicked!')
  }
});

Answer 5

If you need to trigger, use trigger() function.

$('.select-row').trigger('click');