使用javascript或jquery对禁用的按钮执行点击事件[重复]

Question

这个问题已经在这里有了答案：

• 禁用输入事件 10个答案

我有一个表单，其中有一个禁用按钮。 当用户单击该按钮时，我想显示警报msg。

我的表单代码：-

      <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>

上面的代码不适用于除谷歌浏览器之外的任何浏览器。 请告诉我怎么做。

Answer 1

Firefox以及其他浏览器可能会在已禁用的表单字段上禁用DOM事件。 从禁用表单字段开始的任何事件都将被完全取消，并且不会在DOM树上传播。 如果我错了，请纠正我，但是如果您单击禁用按钮，则事件的来源是禁用按钮，而单击事件将被完全清除。 浏览器实际上不知道按钮是否被单击，也不会传递click事件。 就像您单击网页上的黑洞一样。

解决：

设置日期字段的样式，使其看起来好像已被禁用。 使用位值创建一个隐藏的“ 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')
}
});

这只是我脑海中的代码，因此可能并不完全正确。 但是你会痛

Answer 2

我认为您无法做到这一点，但是这里有一个解决方法，希望对您有所帮助。

将按钮放在div中，然后添加您的功能

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

...

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

http://fiddle.jshell.net/LRP7q/1/

Answer 3

浏览器禁用禁用元素上的事件。 如果它在jQuery中运行，则很可能是一个错误。 从Google找到了这个-http: //bugs.jqueryui.com/ticket/5945

但是，如果您确实希望用户与禁用按钮进行交互，则最简单的方法是在不使用“ disabled” html属性的情况下将其禁用。 您可以通过多种方式进行操作，包括：

1. 用CSS模仿禁用的样式（按钮并不是真正禁用的，只是看起来是这样）
2. 禁用按钮，但在其上添加一个叠加层并为其附加事件

如何显示工具提示（标题）以将您的消息传达给用户而不是让他们单击？ 例如：

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

以上也是可访问性更好的解决方案。

Answer 4

在其他论坛上找到了这个。

Firefox以及其他浏览器可能会在已禁用的表单字段上禁用DOM事件。 从禁用表单字段开始的任何事件都将被完全取消，并且不会在DOM树上传播。 如果我错了，请纠正我，但是如果您单击禁用按钮，则事件的来源是禁用按钮，而单击事件将被完全清除。 浏览器实际上不知道按钮是否被单击，也不会传递click事件。 就像您单击网页上的黑洞一样。

因此，另一种解决方案是you can wrap your disabled element around DIV and listen events on that DIV

小提琴的例子