如何使用 jquery 禁用输入 type="image" 的正确方法？答案

【问题标题】：How is the correct way to disable an input type="image" using jquery?如何使用 jquery 禁用输入 type="image" 的正确方法？
【发布时间】：2013-09-24 20:54:56
【问题描述】：

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

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

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

我该如何解决这个问题？

【问题讨论】：

在什么情况下有时不起作用？你的意思是它在某些浏览器中中断了吗？
是的，它在 Firefox 3.5.7 和 safari 中也不起作用。一旦图像第一次出现，它就会开始工作。但是，当我关闭并重新打开浏览器时，它不再工作了。
您的引号在双引号和单引号之间不平衡。 #form 完全没有结束引号
你是对的，但它只是一个错字。源代码是正确的。
您是否尝试过完全不提交表单？如果是预加载会解决的问题，那么如果您注释掉提交部分以测试一下，它应该每次都可以工作。

标签： jquery forms

【解决方案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'
});

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

View a demo here

【讨论】：

Disable: true 也可以通过 jQuerry 工作。我不确定是浏览器还是 jQuery 接受它。浏览器可能会看到具有任何值的属性。