如何在正確選中復選框時啟用？

Question

我試圖在選中復選框時啟用按鈕，但我不知道我的代碼做錯了什么。

 $(document).ready(function() { $(".checkboxdav").on("change", function(e) { if ($(".checkboxdav").attr("checked")) { $(".submit").removeAttr("disabled"); } else { $(".submit").attr("disabled", "disabled"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input checkboxdav" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Declaro que tengo la autorización del propietario del vehículo para suministrar sus datos a Davivienda para la compra del SOAT.</label> </div> <div class="col-12 px-0 d-flex justify-content-center mt-3"> <button type="submit" id="submit-form" class="submit primary-btn px-4 py-2" disabled>Cotizar</button> </div>

Answer 1

checked屬性值不會隨着復選框的狀態而改變，而checked屬性會。 因此，確定復選框是否被選中的跨瀏覽器兼容的方法是使用如下屬性：

if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )

因此，您可以更新您的代碼，例如：

if ($(".checkboxdav").is(":checked")) {
   $(".submit").prop('disabled', false);
} else {
   $(".submit").prop('disabled', true);
}

Answer 2

這段代碼應該可以正常工作。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
   <input type="checkbox" class="custom-control-input checkboxdav" id="customCheck1">
                    <label class="custom-control-label" for="customCheck1">Declaro que tengo la autorización del
                        propietario del vehículo para suministrar sus datos a Davivienda para la compra del
                        SOAT.</label>
                </div>
                <div class="col-12 px-0 d-flex justify-content-center mt-3">
                    <button type="submit" id="submit-form" class="submit primary-btn px-4 py-2"
                        disabled>Cotizar</button>
                </div>
</div>

</body>
<script>
 $(document).ready(function() {

  $(".checkboxdav").on("change", function(e) {
    if ($(".checkboxdav").is(":checked")) {
      $(".submit").prop('disabled', false);
    } else {
      $(".submit").prop('disabled', true);
    }
  });
});
</script>
</html>

Answer 3

嘗試以下代碼。

$('.checkboxdav').on('change', function (e) {
     e.preventDefault();
     if ($(this).is(':checked')) {
         $('#submit-form').attr('disabled', true);
     } else {
         $('#submit-form').removeAttr('disabled', 'disabled');
     }
});

如何在正確選中復選框時啟用？

問題描述

3 個解決方案

解決方案1
2 2020-02-28 15:53:12

解決方案2
1 已采納 2020-02-28 15:59:47

解決方案3
0 2020-02-28 16:00:46

如何在正確選中復選框時啟用？

問題描述

3 個解決方案

解決方案1 2 2020-02-28 15:53:12

解決方案2 1 已采納 2020-02-28 15:59:47

解決方案3 0 2020-02-28 16:00:46

解決方案1
2 2020-02-28 15:53:12

解決方案2
1 已采納 2020-02-28 15:59:47

解決方案3
0 2020-02-28 16:00:46