Сделать окно предупреждения при нажатии на отключенную кнопку

Question

У меня есть кнопка, которая по умолчанию отключена, но когда установлен флажок, кнопка включается. Я хотел бы отредактировать сценарий, чтобы сделать окно предупреждения, когда кнопка нажата, когда отключена, чтобы убедиться, что пользователь знает, что он/она должен установить флажок.

Моего сценария до сих пор:

<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

Я сделал 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...'); 
}; 
}); 

Длинная и короткая часть его, если элемент «отключено» все события, которые происходят на нем, подавляются. В моей скрипке я «подделал» отключенную кнопку, используя стиль, чтобы событие клика по-прежнему отображалось в браузере.

Answer 2

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

, если ваш браузер не может обнаружить нажмите на кнопке инвалидов, Деформация кнопку внутри DIV и изменить функцию, чтобы нажать на этих делах.