Как правильно отключить ввод type = "image" с помощью jquery?

Question

С помощью jQuery я пытаюсь отключить поле ввода следующим образом:

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

Я бы хотел отключить кнопку и изменить изображение на другое (submitGreyed.jpg), чтобы визуально уведомить, что кнопка отключена.

С помощью следующей строки я отключаю кнопку:

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

затем я меняю изображение на:

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

и после отключения я отправляю форму с:

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

Вторая строка имеет странное поведение; иногда работает, а иногда нет.

Когда это работает, кнопка отключается, изображение меняется и форма отправляется; когда это не работает, кнопка отключена, форма отправляется, но изображение не изменяется.

Как я могу решить эту проблему?

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'
});

Поскольку в своем тесте я использовал полный путь, это могло бы немного повлиять на него.

Посмотреть демонстрацию здесь