如何使用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'
});

因为在我的测试中我使用了完整路径,这可能会对它产生一些影响.

在这里查看演示