单击禁用按钮时生成警报窗口

Posted 2023-02-22

【中文标题】单击禁用按钮时生成警报窗口

【英文标题】：Make alert window when clicking a disabled button

【发布时间】：2015-07-06 23:36:33

【问题描述】：

我有一个按钮默认禁用，但是当检查复选框时，然后启用按钮。我想编辑脚本以在禁用时单击按钮时发出警报窗口，以确保用户知道他/她必须选中复选框。

到目前为止我的脚本：

<script type="text/javascript">
$('#terms').on('change', function()
          if ($(this).is(':checked'))
             $('#customButton').removeProp('disabled');
          
          else
             $('#customButton').attr('disabled', 'disabled');
          
       );
</script>

<form id="payment-form" action="chargeCard.php" method="POST" name="payment-form">
<input type="checkbox" id="terms" />
<input type="image"  src="button3.png" id="customButton" value="submit"  disabled="disabled"/>
</form>

【问题讨论】：

您想在点击disabled按钮时触发事件处理程序？

我想触发一个功能，如果按钮被禁用并单击，则会弹出一个警报窗口。

你没有抓住重点，disabled 元素不会触发事件。自己测试一下jsfiddle.net/ym34ud8j

你应该检查这个问题，***.com/questions/3100319/event-on-a-disabled-input

【参考方案1】：

我做了一个Fiddle

代码如下：

html

<form id="payment-form" action="chargeCard.php" method="POST" name="payment-form">
<input type="checkbox" id="terms" />
<input type="button"  id="customButton" value="submit"  class="disabled"/>
</form>

JS

$('#terms').on('change', function()
if ($(this).is(':checked'))
    $('#customButton').removeClass('disabled');

else
    $('#customButton').addClass('disabled');

);

$('#customButton').on('click',function(e)
if( $(this).hasClass('disabled') )
    e.preventDefault();
    alert('Please confirm . . .');
else
    alert('go ahead...');
;
);

总而言之，如果一个元素被“禁用”，那么在它上面发生的所有事件都会被抑制。在我的小提琴中，我使用一种样式“伪造”了一个禁用的按钮，因此点击事件对浏览器仍然可见。

【讨论】：

非常感谢，我编辑了它，但它让我上路了。

【参考方案2】：

$("#customButton").click(function()
if !($("#terms").is(':checked'))
 
 alert("Accept terms first!");
 
)

如果您的浏览器无法检测到对已禁用按钮的点击，请在 div 内扭曲按钮并更改功能以点击该 div。

【讨论】：

这对我有帮助。我没有想到将禁用的按钮包装在 div 中以捕获点击事件。