Question

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

我的表格代码： -

      <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树中向上传播。如果我错了，请纠正我，但如果您单击禁用按钮，则事件源是禁用按钮，并且完全消除了单击事件。浏览器字面上不知道点击的按钮，也没有通过点击事件。就像你点击网页上的黑洞一样。

解决方法：

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

另一种方式

使用readonly而不是disabled

至少对于复选框，这会使它们看起来已禁用但行为正常（在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中工作，那很可能是一个bug。从谷歌发现 - 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可访问性。

Answer 4

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

Firefox以及其他浏览器可能会禁用表单字段上的DOM事件被禁用。从禁用的表单字段开始的任何事件都是完全取消并且不会传播DOM树。纠正我如果我错了，但是如果你点击禁用按钮，则来源事件是禁用按钮，完成点击事件歼灭。浏览器字面上不知道点击的按钮，也没有通过点击事件。这就像你点击一个网页上的黑洞。

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

使用javascript或jquery在禁用按钮上执行单击事件

4 个答案:

Example Fiddle