时间戳

首页 > 解决方案 > 正确选中复选框时如何启用？

javascript - 正确选中复选框时如何启用？

问题描述

我正在尝试在选中复选框时启用按钮，但我不知道我的代码做错了什么。 

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

标签： javascripthtmlbootstrap-4

解决方案

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

推荐阅读