¿Cómo es la forma correcta de desactivar un tipo de entrada = "imagen" usando jquery?

Question

con jQuery, estoy tratando de desactivar un campo de entrada como esta:

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

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

con la siguiente línea que deshabilitar el botón:

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

entonces cambiar la imagen con:

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

y una vez desactivada me envíe el formulario con:

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

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

Cuando funciona, el botón está desactivado, 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 se cambia.

¿Cómo puedo solucionar esto?

Answer 1

Esto no responde a su pregunta exactamente, pero yo creo que sirve:

En primer lugar, debe ser disabled="disabled" fin de utilizar esta:

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

Y cuál es su botón de color gris no estoy seguro parece, pero usted podría intentar usar sólo la opacidad:

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

actualización no podía replicar el problema, por lo que aquí es mi sugerencia:

utilizar una ruta absoluta a la imagen en lugar de una relación, y establecer ambos atributos al mismo tiempo (Aunque el establecimiento de una después de la otra no cambió mi prueba):

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

Dado que en mi prueba utilicé una ruta completa, eso podría haberlo afectado un poco.

View a demo here