Con jQuery, estoy tratando de deshabilitar un campo de entrada como este:

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

Lo que me gustaría hacer es desactivar el botón y cambiar la imagen con una imagen diferente (submitGreyed.jpg) para notificar visualmente que el botón está desactivado.

Con la siguiente línea deshabilito el botón:

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

luego cambio la imagen con:

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

y una vez deshabilitado, envío el formulario con:

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

La segunda línea tiene un comportamiento extraño; a veces funciona y a veces no.

Cuando funciona, el botón está deshabilitado, la imagen cambia y se envía el formulario; cuando no funciona, el botón está deshabilitado, el formulario se envía pero la imagen no cambia.

¿Como puedo resolver esto?