Я хочу отключить кнопку, когда один или оба флажка сняты, поэтому включайте их только тогда, когда установлены оба флажка.

Флажки добавляются после загрузки страницы, поэтому мой код в настоящее время выглядит следующим образом:

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.

0
twan 31 Авг 2017 в 12:51

6 ответов

Лучший ответ

Попробуй так

$(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
Parveen Kumar 31 Авг 2017 в 10:36

Здесь вы можете попробовать:

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

if($(this).attr('checked') == false){
     $('#checkoutbtn').attr("disabled","disabled");   
}
else {
    $('#checkoutbtn').removeAttr('disabled');
}
});
0
Ajay Malhotra 31 Авг 2017 в 09:58

Надеюсь это поможет. Кнопка активна только тогда, когда установлены два флажка.

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>
1
Phani Kumar M 31 Авг 2017 в 10:21

Если вы нажмете на отключенную кнопку, браузер буквально не узнает, что кнопка была нажата, и не передаст событие click. Поэтому невозможно дать предупреждение, когда нажимаешь кнопку отключения. Так что вы попробуйте следующий код.

Ваш 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;
        }            

     });

вы можете посмотреть здесь

1
Sasi Rekha 31 Авг 2017 в 10:24
$(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');
  })
});

Этот код делает то, что вам нужно, но с одним исключением - отключенный элемент не запускает события.

0
lasha maraneli 31 Авг 2017 в 10:07

Если установлены оба флажка 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>
0
RaJesh RiJo 31 Авг 2017 в 12:27