我有一个按钮,默认情况下是禁用的,但是当选中一个复选框时,该按钮会被启用。我想编辑脚本以在禁用时单击按钮时创建警报窗口,以确保用户知道他/她必须选中复选框。
到目前为止我的脚本:
<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>
答案 0 :(得分: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...');
};
});
它的长短是,如果一个元素被“禁用”,那么发生在它上面的所有事件都会被抑制。在我的小提琴中,我使用样式伪造了一个禁用按钮,因此浏览器仍然可以看到点击事件。
答案 1 :(得分:1)
$("#customButton").click(function(){
if !($("#terms").is(':checked'))
{
alert("Accept terms first!");
}
})
如果您的浏览器无法检测到单击已禁用的按钮,请将div中的按钮变形并更改该功能以单击该div。