如何通过复选框选中状态使用jQuery切换元素属性？

你的代码逻辑有误，$(".btn-submit").attr("checked"); 仅读取属性值，并未修改按钮的disabled状态。以下是修正后的实现：

jQuery 实现 #

JavaScript 代码 #

$(document).ready(function() {
  // 监听复选框状态变化事件（支持鼠标和键盘操作触发）
  $("#checkbox").on("change", function() {
    // 根据复选框选中状态，切换按钮的禁用状态
    $(".btn-submit").prop("disabled", !this.checked);
  });
});

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" class="checkbox" id="checkbox">
<button class="btn-submit" disabled>Submit</button>

关键说明 #

• 用change事件替代click：复选框选中状态可通过键盘（如空格）切换，change能准确捕获所有状态变化场景
• 用prop()设置disabled：disabled是布尔型DOM属性，prop()比attr()更适合处理这类原生属性
• 逻辑对应：复选框选中时，按钮disabled设为false（启用）；未选中时设为true（禁用）

内容的提问来源于stack exchange，提问作者PRANAV