输入框与复选框联动校验异常：满足条件后按钮仍无法启用

问题根源 #

你的代码存在两个关键问题导致按钮无法正常启用：

• 选择器不匹配：JavaScript中使用.kit-activation-button选择提交按钮，但HTML里按钮的class是btn btn-primary、id是Button，选择器无法定位到目标按钮，因此修改disabled属性的操作无效。
• 事件监听不全：仅监听了激活码输入框的input事件，未监听复选框的change事件，导致勾选/取消复选框时不会触发校验逻辑，按钮状态不会更新。

修复后的代码 #

HTML（结构无需修改，确保按钮标识对应即可）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="activationCode" name="code" class="form-control required" required aria-required="true" maxlength="7">

<input type="checkbox" id="checkbox" />

<button type="submit" class="btn btn-primary" id="Button" disabled>submit</button>

JavaScript（修正选择器并补充事件监听）

// 封装校验逻辑，避免重复代码
function checkSubmitStatus() {
  const codeValid = $('#activationCode').val().length === 7;
  const checkboxChecked = $('#checkbox').is(':checked');
  // 用按钮ID精准定位，用prop()修改布尔属性更可靠
  $('#Button').prop('disabled', !(codeValid && checkboxChecked));
}

// 给输入框和复选框绑定触发校验的事件
$(document).on('input', '#activationCode', checkSubmitStatus);
$(document).on('change', '#checkbox', checkSubmitStatus);

// 页面加载时执行一次校验，确保初始状态正确
$(checkSubmitStatus);

额外说明 #

• 对于disabled这类布尔型DOM属性，jQuery推荐使用prop()而非attr()修改，前者能更准确地同步DOM元素的状态。
• 把校验逻辑抽成独立函数，既减少重复代码，也能在页面初始化时直接调用，保证按钮初始状态符合规则。

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