Question

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

在pageload之后添加了复选框，因此我的代码目前看起来像这样：

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时启用该按钮。

Answer 1

尝试那样

＆＃13;

bill

＆＃13;

$(document).on('change','.chk', function() {
	   var checkCount=$('.chk:checked').length;
	   var totalCheckbox =$('.chk').length;
	   totalCheckbox==checkCount ? $("#checkoutbtn").prop('disabled', false):$("#checkoutbtn").prop('disabled', true);
    });

＆＃13;

Answer 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>

Answer 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

Answer 4

您可以尝试：

$('#voorwaarden').click(function(){

if($(this).attr('checked') == false){
     $('#checkoutbtn').attr("disabled","disabled");   
}
else {
    $('#checkoutbtn').removeAttr('disabled');
}
});

Answer 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');
  })
});

此代码可以满足您的需求，但有一个例外 - 禁用的元素不会触发事件。

Answer 6

如果两个复选框都是checked，那么按钮应该是可访问的，否则它应该是disabled！然后下面的代码片段将有助于实现相同的目标。

$(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>

检查是否取消选中两个复选框并禁用按钮

6 个答案: