How is the correct way to disable an input type="image" using jquery?

Question

With jQuery, I'm trying to disable an input field like this:

<input id="submit" type="image" src="submit.jpg">

What I would like to do is disabling the button and change the image with a different image (submitGreyed.jpg) to visually notify that button is disabled.

With the following line I disable the button:

JQuery("#submit").attr('disabled','true');

then I change the image with:

JQuery("#submit").attr('src','submitGreyed.jpg');

and once disabled I submit the form with:

JQuery("#form").submit();

The second line has some weird behaviour; sometimes works and sometimes doesn't.

When it works, button is disabled, image changed and form is submitted; when it does not work, button is disabled, form is submitted but image is not changed.

How can I solve this?

Answer 1

This doesn't answer your question exactly, but I hope it helps:

First, it should be disabled="disabled" so use this:

jQuery("#submit").attr('disabled','disabled');

And I am not sure what your grayed out button looks like, but you could try just using opacity:

jQuery("#submit").attr('disabled','disabled').css('opacity',0.5);

Update I couldn't replicate the problem, so here is my suggestion:

Use an absolute path to the image instead of a relative one, and set both attributes at the same time (Though setting one after the other didn't change my test):

jQuery("#submit").attr({
   disabled: 'disabled',
   src:      '/images/submitGreyed.jpg'
});

Since in my test I used a full path, that might have affect it a bit.

View a demo here