如何在复选框勾选时正确启用按钮？代码问题求助

嘿，我看了你的代码，问题出在判断复选框当前状态的方式上，咱们来一步步修复它：

问题根源 #

你用了$(".checkboxdav").attr("checked")来判断复选框是否被勾选，但attr()方法获取的是元素初始的HTML属性值，不会随着用户的勾选/取消操作动态更新。也就是说，哪怕用户勾选了复选框，这个方法返回的还是页面加载时的初始值（通常是undefined或者空），导致你的启用/禁用逻辑完全失效。

修复方案 #

有两种简单的修正方式，选哪种都可以：

方式1：用原生DOM属性this.checked（更高效）

直接使用触发事件的复选框元素的原生checked属性，它会实时反映当前的勾选状态：

$(document).ready(function() {
  $(".checkboxdav").on("change", function(e) {
    // this指的是当前触发change事件的复选框元素
    if (this.checked) {
      $(".submit").removeAttr("disabled");
    } else {
      $(".submit").attr("disabled", "disabled");
    }
  });
});

方式2：用jQuery的prop()方法

如果更习惯用jQuery方法，prop()可以正确获取元素的动态属性状态，替代attr()：

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

完整可运行代码 #

把修正后的JS和你的HTML整合起来就是这样：

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

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

小建议：如果页面上只有这一个复选框，用id选择器（$("#customCheck1")）会比类选择器更精准哦～

内容的提问来源于stack exchange，提问作者Juan Camilo Sanchez Alfonso