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

【问题标题】：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时启用按钮。

【问题讨论】：

标签： javascript jquery checkbox

【解决方案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>

【讨论】：