Wie ist der richtige Weg, um einen Eingabetyp = "Bild" mit jquery zu deaktivieren?

Question

Mit jQuery, ich versuche, ein Eingabefeld wie folgt zu deaktivieren:

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

Was ich den Knopf tun möchte, ist zu deaktivieren und das Bild mit einem anderen Bild ändern (submitGreyed.jpg) visuell zu benachrichtigen Diese Schaltfläche ist deaktiviert.

Mit der folgenden Zeile deaktiviere ich die Taste:

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

dann ändere ich das Bild mit:

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

und einmal deaktiviert übermittle ich das Formular mit:

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

Die zweite Zeile hat ein seltsames Verhalten; funktioniert manchmal und manchmal nicht.

Wenn es funktioniert, ist die Schaltfläche deaktiviert, das Bild wurde geändert und das Formular wird gesendet. Wenn es nicht funktioniert, ist die Schaltfläche deaktiviert, das Formular wird gesendet, aber das Bild wird nicht geändert.

Wie kann ich das lösen?

Answer 1

diese Antwort Ihre Frage nicht genau, aber ich hoffe, es hilft:

Erstens sollte es sein disabled="disabled" so verwenden:

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

Und ich bin nicht sicher, was Ihre abgeblendet Schaltfläche nur mit Opazität aussieht, aber man könnte versuchen:

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

aktualisieren ich das Problem nicht replizieren konnte, so hier mein Vorschlag ist:

einen absoluten Pfad zu dem Bild anstelle eines relativen ein, und legen Sie beide zugleich Attribute (Obwohl eine nach der anderen Einstellung meinem Test nicht ändern):

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

Da ich in meinem Test einen vollständigen Pfad verwendet habe, könnte das etwas beeinflusst haben.

View a demo here