Come è possibile disabilitare un tipo di input = "image" usando jquery?

Question

con jQuery, sto cercando di disattivare un campo di input in questo modo:

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

Quello che vorrei fare è disattivare il pulsante e cambiare l'immagine con un'immagine diversa (submitGreyed.jpg) per notificare visivamente quel pulsante è disabilitato.

Con la seguente riga a disattivare il tasto:

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

allora posso cambiare l'immagine con:

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

e una volta disabilitato mi inviate il formulario con:

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

La seconda riga ha un comportamento strano; a volte funziona e talvolta no.

Quando funziona, il pulsante è disabilitato, l'immagine è cambiata e il modulo è inviato; quando non funziona, il pulsante è disabilitato, il modulo viene inviato ma l'immagine non viene modificata.

Come posso risolvere questo?

Answer 1

Questo non risponde alla tua domanda esattamente, ma spero che aiuta:

In primo luogo, dovrebbe essere disabled="disabled" in modo da utilizzare questo:

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

E io non sono sicuro di quello che il pulsante grigio sembra, ma si potrebbe provare semplicemente utilizzando l'opacità:

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

aggiornamento non ho potuto replicare il problema, ecco è il mio suggerimento:

utilizzare un percorso assoluto per l'immagine invece di un parente uno, e impostare entrambi gli attributi allo stesso tempo (anche se l'impostazione uno dopo l'altro non ha cambiato la mia prova):

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

Dal mio test ho usato un percorso completo, che potrebbe averlo influenzato un po '.

View a demo here