单击禁用按钮时发出警报 window

Question

我有一个按钮，默认情况下是禁用的，但是当检查复选框时，然后启用了按钮。我想编辑脚本以在禁用时单击按钮时发出警报 window，以确保用户知道 he/she 必须选中复选框。

到目前为止我的脚本：

<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" alt="button" disabled="disabled"/>
</form>

Answer 1

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

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

Answer 2

我做了一个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" alt="button" 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...');
};
});

总而言之，如果一个元素是 'disabled'，则在其上发生的所有事件都会被抑制。在我的 fiddle 中，我 'faked' 一个使用样式的禁用按钮，因此浏览器仍然可以看到点击事件。

单击禁用按钮时发出警报 window

Make alert window when clicking a disabled button

html

javascript

forms

checkbox

button