单击禁用的按钮时，使警报窗口

问题描述

我有一个按钮的默认情况下是禁止的，但当复选框被选中的按钮然后启用.我想编辑脚本以在禁用按钮后单击该按钮以创建一个警报窗口，以确保用户知道他/她必须选中该复选框.

I have a button which by default is disable, but when a checkbox is checked the button is then enabled. I would like to edit the script to make an alert window when the button is clicked when disabled, to make sure the user knows he/she has to check the checkbox.

到目前为止，我的脚本是

My script so far:

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

推荐答案

我制作了小提琴

代码如下:

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

它的长短是，如果一个元素被禁用"，所有发生在它上面的事件都会被抑制.在我的小提琴中，我使用一种样式来伪造"一个禁用的按钮，以便单击事件仍对浏览器可见.

The long and short of it is, if an element is 'disabled' all events that happen on it are suppressed. In my fiddle I've 'faked' a disabled button using a style so the click event is still visible to the browser.

这篇关于单击禁用的按钮时，使警报窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！