使用 jquery 禁用输入 type="image" 的正确方法是什么？

使用 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();

第二行有一些奇怪的行为；有时有效，有时无效。

当它起作用时，按钮被禁用，图像被更改并提交表单； 当它不起作用时，按钮将被禁用，表单将被提交，但图像不会更改。

我该如何解决这个问题？

这并不能完全回答您的问题，但希望对您有所帮助：

首先，应该是disabled="disabled"所以用这个：

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

我不确定你的灰色按钮是什么样子，但你可以尝试只使用不透明度：

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

Update我无法复制这个问题，所以这是我的建议：

使用图像的绝对路径而不是相对路径，并同时设置两个属性（尽管一个接一个地设置并没有改变我的测试）：

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

由于在我的测试中我使用了完整路径，这可能会对其产生一些影响。

在这里查看演示