使用javascript或jquery对禁用的按钮执行单击事件

我有一个窗体，其中有一个禁用的按钮。当用户点击该按钮时，我想显示警报消息

我的表格编号：-

      <form>
       <input type="button" id="btn" value="Click" disabled>
       </form>

jquery的代码：-

         <script src="path of jquery">
        <script type="text/javascript">

         $(document).on('click',function(e){
         if(e.target.id == "btn" && e.target.disabled){
         alert("The button is clicked.");
         }
          });
        </script>

$（文档）。在（'单击'）上，函数（e）{
如果（e.target.id==“btn”&&e.target.disabled）{
警报（“单击按钮”）；
}
});

上述代码在除google chrome之外的任何浏览器中都不起作用。

---

请告诉我怎么做。

Firefox，也许还有其他浏览器，在被禁用的表单字段上禁用DOM事件。从禁用的表单字段开始的任何事件都将被完全取消，并且不会向上传播DOM树。如果我错了，请纠正我，但是如果单击“禁用”按钮，则事件源是“禁用”按钮，单击事件将完全消失。浏览器实际上不知道按钮被点击，也不传递点击事件。这就好像你在点击网页上的一个黑洞

解决方法：

设置日期字段的样式，使其看起来好像已禁用。 使用位值创建一个隐藏的“use_date”表单字段，以确定在处理过程中是否使用日期字段。 将新函数添加到日期字段的onClick，这将更改样式类，使其显示为启用状态，并将“use_date”值设置为1

另一种方式

使用只读而不是禁用

至少对于复选框来说，这会使它们看起来被禁用，但行为正常（在Google Chrome上测试）。您必须捕获单击并根据需要阻止事件的默认操作

您可以在“提交”按钮周围放置一个div，并在“提交”按钮禁用时为其附加一个单击功能：

<div id="sub-div"><input type="submit"><div>

$('sub-div').click(function(event){
if (attr('submit-button', 'disabled') == 'true')
{
alert('Button Disabled')
}
});

$（'sub-div'）。单击（函数（事件）{
如果（attr（'submit-button'，'disabled'）=='true'）
{
警报（'按钮已禁用'）
}
});

---

这只是我头脑中的代码，所以可能不完全正确。但是你得到了答案

我想你做不到，但是这里有一个解决方法，我希望它能帮助你

将按钮放在div中，然后添加您的函数

<form>
    <div id="btnContainer">
   <input type="button" id="btn" value="Click" disabled>
     </div>
</form>

---

浏览器禁用禁用元素上的事件。如果它在jQuery中工作，则很可能是一个bug。从谷歌找到这个-

但是，如果您真的希望用户与禁用的按钮交互，最简单的方法是禁用它，而不使用“disabled”html属性。您可以通过多种方式完成，包括：

用CSS模仿禁用的样式（按钮并没有真正禁用，只是看起来如此）

禁用该按钮，但在其上添加覆盖并将事件附加到该按钮

如何显示一个工具提示（标题）来向用户传达您的信息，而不是让他们点击？ 例如：

---

以上是一个更好的解决方案，w.r.t易访问性也是。

在其他论坛上发现了这一点

---

Firefox，也许还有其他浏览器，在表单字段上禁用DOM事件 那些是残疾的。从“已禁用表单”字段开始的任何事件都是 完全取消，不会向上传播DOM树。纠正我 如果我错了，但是如果你点击了禁用按钮，那么 事件为禁用按钮，单击事件完全禁用 精疲力尽的浏览器根本不知道按钮被点击， 它也不会传递单击事件。这就好像你在点击一个 网页上的黑洞

另一个解决办法是

您可以将禁用的元素环绕在DIV周围，并侦听该DIV上的事件

---

disabled

表示“disabled”。是否有多个禁用按钮？确切地说，如果您禁用了按钮，则无法使用它执行操作。尝试使用样式表获得类似的禁用外观和感觉，并处理单击事件查看这是否有帮助。。。使用

readonly

而不是

disabled

这是个笑话，对吗？@abhitalks有什么好笑的？对我来说，这似乎是一个不错的解决办法，但实际上，事件应该检查按钮是否被禁用。@JLRishe：是的，你是对的。这确实是一个解决办法。击败语义真的不值得，尤其是在本例中，IMO。但是，我只是在删除一条评论，而不是否决。当单击div bt时，上面的代码起作用，而不是当单击按钮

disabled

属性出于某种目的而存在时。如果你发现自己在解决这个问题，这意味着逻辑有问题。@abhitalks为什么？在我看来，OP希望给出按钮不可用的视觉指示，但如果用户尝试单击按钮，仍然会向用户显示消息。@JLRishe:a

title

在这种情况下更合适，依我看，@abhitalks

title

s在用户使用移动设备时没有多大帮助。@JLRishe:你的论点很好。但是，我从未见过iOS提醒我“禁用”按钮。在我看来，这是有史以来最好的移动用户体验。如果用户在移动设备上，工具提示就没有多大帮助。请同意，至少在移动设备开始支持hover之前，它们很快就会：）。但理想情况下，用户也不应该单击禁用的按钮。另外，我也不建议在专业网站上使用alert（使用消息对话框或内联消息区或烤面包机之类的小部件）！

$("#btnContainer").click(function(){
    if($("#btn").is(":disabled")){
       alert("The button is disabled.");
    }
});

<form>
    <input type="button" id="btn" value="Click" title="This button is disabled" disabled>
</form>