javascript - 检查两个复选框是否未选中并禁用按钮

标签 javascript jquery checkbox

我想在取消选中 1 个或两个复选框时禁用按钮,因此仅在选中两个复选框时才启用它。

复选框是在页面加载后添加的,因此我的代码当前如下所示:

jQuery(document).on('change','#voorwaarden', function() {
    jQuery("#checkoutbtn").prop('disabled', !this.checked)
    });

还有我的 html:

<button type="submit" title="<?php echo $this->__('Place Order') ?>" disabled="disabled" class="button btn-checkout" id="checkoutbtn" onclick="review.save();"><span><?php echo $this->__('Place Order') ?></span></button>
<p><input type="checkbox" class="checkbox" id="voorwaarden" style="display:inline;" required/><b> Ik ga akkoord met de algemene voorwaarden <em>*</em></b></p>
<p><input type="checkbox" class="checkbox" id="geboorte" style="display:inline;"/><b> Ik ben ouder dan 18 jaar <em>*</em></b></p>

还有一个问题,我想在单击按钮和禁用按钮时显示警报,但我发现无法在禁用的按钮上触发单击功能。

目前,仅当单击 #voorwaarden 时才会启用该按钮。

最佳答案

这样试试

$(document).on('change','.chk', function() {
	   var checkCount=$('.chk:checked').length;
	   var totalCheckbox =$('.chk').length;
	   totalCheckbox==checkCount ? $("#checkoutbtn").prop('disabled', false):$("#checkoutbtn").prop('disabled', true);
    });
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
    <button type="submit" title="<?php echo $this->__('Place Order') ?>" disabled="disabled" class="button btn-checkout" id="checkoutbtn" onclick="review.save();"><span><?php echo $this->__('Place Order') ?></span></button>
	<p><input type="checkbox" class="checkbox chk" id="voorwaarden" style="display:inline;" required/><b> Ik ga akkoord met de algemene voorwaarden <em>*</em></b></p>
	<p><input type="checkbox" class="checkbox chk" id="geboorte" style="display:inline;"/><b> Ik ben ouder dan 18 jaar <em>*</em></b></p>
</body>
</html>

关于javascript - 检查两个复选框是否未选中并禁用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45978441/

相关文章:

javascript - Angular UI Bootstrap TypeAhead - 如何强制用户选择

javascript - .append() 和 .empty() 上的问题

c# - Watin 测试在 Visual Studio 中运行,但不能在 CCNet 中作为 Windows 服务运行

windows - 如何制作 System::Windows::Forms::Checkbox^ 的向量/数组

javascript - 需要根据从 jsp 中的 Controller 传递的变量来选中/取消选中页面加载时的复选框

javascript - 禁止使用 ExtJS 将列拖动到某些位置

javascript - 使用来自 PHP 的查询填充 HTML 元素

javascript - 从服务器获取 SOAP 响应

javascript - 如何为这个基于 setInterval 的 Sprite 动画添加 5 秒延迟?

java - JFrame - 将复选框添加到屏幕