使用javascript或jquery在禁用按钮上执行点击事件[重复]答案

【问题标题】：Perform click event on disabled button using javascript or jquery [duplicate]使用javascript或jquery在禁用按钮上执行点击事件[重复]
【发布时间】：2014-05-19 05:45:15
【问题描述】：

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

我的表单代码：-

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

上面的代码在除了谷歌浏览器之外的任何浏览器中都不起作用。请告诉我如何制作。

【问题讨论】：

disabled 表示“禁用”。
是否有多个禁用按钮？
准确地说，如果您禁用了按钮，则无法使用它执行操作。尝试使用样式表来获得类似的禁用外观和处理点击事件
看看这是否有帮助...stackoverflow.com/questions/3100319/event-on-a-disabled-input
使用readonly 而不是disabled

标签： javascript jquery html

【解决方案1】：

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')
}
});

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

【讨论】：

disabled 属性的存在是有目的的。如果你发现自己正在解决这个问题，这意味着逻辑有问题。
@abhitalks 为什么？在我看来，OP 想要给出一个按钮不可用的视觉指示符，但在用户尝试单击它时仍会向用户显示一条消息，这似乎是合理的。
@JLRishe：在这种情况下，title 更合适，IMO。
如果用户使用移动设备，@abhitalks titles 并不是很有帮助。
@JLRishe：你的论点很好。但是，我从来没有见过 iOS 提醒我“禁用”按钮。 IMO 是有史以来最好的移动用户体验。

【解决方案2】：

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

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

使用 CSS 模仿禁用样式（按钮并没有真正禁用，只是看起来如此）
禁用按钮，但在其上添加叠加层并将事件附加到它

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

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

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

【讨论】：

如果用户在移动设备上，工具提示不是很有帮助。
同意，至少在移动设备开始支持悬停之前，它们很快就会:)。但理想情况下，用户也不应该点击禁用的按钮。此外，我也不建议在专业网站中使用警报（使用消息对话框或内联消息区域或烤面包机等小部件）！

【解决方案3】：

我认为您不能这样做，但这里有一个解决方法，希望对您有所帮助。

将按钮放在 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/

【讨论】：

这是个玩笑吧？
@abhitalks 这有什么好笑的？对我来说似乎是一个不错的解决方法，尽管实际上事件应该检查按钮是否被禁用。
@JLRishe：是的，你是对的。这确实是一种解决方法。打败语义真的不值得，尤其是在这种情况下，IMO。但是，我只是发表评论，而不是反对。
以上代码在点击 div 时有效，在点击按钮时无效

【解决方案4】：

在其他论坛上找到这个。

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

所以另一个解决方案是 you can wrap your disabled element around DIV and listen events on that DIV

Example Fiddle

【讨论】：