How can I disable input type = "image" using jquery?

Question

Using jQuery, I am trying to disable an input field as follows:

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

What I would like to do is disable the button and change the image with another image (submitGreyed.jpg) to visually notify this button.

In the next line, I will disable the button:

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

then I change the image to:

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

and after disconnecting I will submit the form with:

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

The second line has strange behavior; sometimes it works, and sometimes not.

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

How can i solve this?

Answer 1

, , :

-, disabled="disabled", :

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

, , :

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

, :

( ):

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

, .