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

Question

Hi

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

with this i change the image

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 don'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.

Do you think is a problem that can be resolved with image preloading? Many thanks.

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