最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

javascript - jQuery click event on disabled input field - Stack Overflow

matteradmin1PV0评论

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?

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?

Share Improve this question edited Mar 15, 2018 at 11:55 Sinister Beard 3,68014 gold badges63 silver badges99 bronze badges asked Jul 28, 2015 at 7:30 Simranjit SinghSimranjit Singh 2892 silver badges10 bronze badges 2
  • 2 I think a disabled element cannot be clickable. Do you really need to apply this property? – NullPointerException Commented Jul 28, 2015 at 7:36
  • Here is a good alternative stackoverflow./questions/16109228/… – Ankit Pandey Commented Jul 28, 2015 at 7:36
Add a ment  | 

5 Answers 5

Reset to default 4

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.

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

Demo

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');

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!')
  }
});

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

$('.select-row').trigger('click');
Post a comment

comment list (0)

  1. No comments so far