检查两个复选框是不是未选中并禁用按钮
Posted
技术标签:
【中文标题】检查两个复选框是不是未选中并禁用按钮【英文标题】：Check if two checkboxes are unchecked and disable button检查两个复选框是否未选中并禁用按钮 【发布时间】：2018-02-09 05:34:17 【问题描述】：我想在未选中 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时启用按钮。
【问题讨论】：
【参考方案1】：这样试试
$(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>【讨论】：
【参考方案2】：希望这会有所帮助。仅在选中两个复选框时才启用该按钮。
jQuery(document).on('click', '.checkbox', function ()
var bflag = true;
jQuery(".checkbox").each(function (i, e)
if ($(this).is(":checked") == false) bflag = false;
)
jQuery("#checkoutbtn").prop('disabled', !bflag);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" title="Submit" disabled="disabled" class="button btn-checkout" id="checkoutbtn" onclick="review.save();"><span>test</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>【讨论】：
【参考方案3】：如果您单击禁用的按钮，浏览器实际上不知道该按钮被单击，也不会传递单击事件。因此，单击禁用按钮时不可能发出警报。所以你试试下面的代码。
您的 HTML
<button type="submit" class="button btn-checkout" id="checkoutbtn">
<span>Submit</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>
Javascript
$("#checkoutbtn").click(function ()
if($('#voorwaarden').is(':checked') && $('#geboorte').is(':checked'))
alert("Your Success Message");
return true;
else
alert("Your Fail Message");
return false;
);
你可以在这里看到Fiddle
【讨论】：
【参考方案4】：你可以在这里试试：
$('#voorwaarden').click(function()
if($(this).attr('checked') == false)
$('#checkoutbtn').attr("disabled","disabled");
else
$('#checkoutbtn').removeAttr('disabled');
);
【讨论】：
【参考方案5】：$(document).ready(function()
$(document).on('change', '#voorwaarden,#geboorte', function()
console.log($('#voorwaarden:checked,#geboorte:checked').length);
if($('#voorwaarden:checked, #geboorte:checked').length == 2)
$('button').removeAttr("disabled");
else $('button').attr("disabled", "disabled");
);
$('button').click(function(e)
alert('test');
)
);
此代码可以满足您的需要，但有一个例外 - 禁用的元素不会触发事件。
【讨论】：
【参考方案6】：如果两个复选框都是checked，那么按钮应该是可访问的，否则它应该是disabled！那么下面的 sn-p 将有助于实现相同的目标。
$(document).ready(function()
$(document).on('change', '.checkThis', function()
if ($(this).is(':checked') && $(this).siblings('.checkThis').is(':checked'))
$('.btnClick').removeAttr('disabled');
else
$('.btnClick').attr('disabled', 'disabled');
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkThis">Check me
<input type="checkbox" class="checkThis">Check me too
<button type="submit" class="btnClick" disabled="disabled">Click me</button>【讨论】：
以上是关于检查两个复选框是不是未选中并禁用按钮的主要内容，如果未能解决你的问题，请参考以下文章
如果复选框选中禁用其他，如果未选中启用所有 JavaScript？