复选框可触发console.log但按钮disabled类切换失效的问题求助

我正在开发一个分步表单，每一步都有“下一步”按钮，需要通过复选框校验控制用户能否进入下一步：当选中的复选框数量小于1时，给提交按钮添加disabled类；选中1个及以上时移除该类。目前console.log能正常输出，但按钮的disabled类切换操作不生效，请问我的解决思路是否有误？

我的代码如下：

if ($("#emotion51 input:checkbox:checked").length < 1) {
    console.log("checked<1");
    $("#step4 button[type='submit']").addClass("disabled");
} else {
    $("#step4 button[type='submit']").removeClass("disabled");
}

• 检查选择器是否正确命中元素
  在浏览器控制台执行$("#step4 button[type='submit']").length，如果返回0，说明选择器写错了：可能按钮的type不是submit，step4的ID拼写错误，或者按钮不在#step4容器内。修正选择器即可。

• 排查CSS优先级冲突
  打开浏览器开发者工具，查看目标按钮的样式面板。如果disabled类的样式被划掉，说明存在更高优先级的样式覆盖了它。可以给disabled类的样式增加权重（比如写成#step4 button.disabled），或者调整原有样式的优先级。

• 确认代码执行时机
  如果代码在DOM加载完成前执行，选择器会找不到目标元素。把代码放在$(document).ready()回调里，或者移到页面底部（</body>标签前），确保DOM渲染完成后再执行操作。

• 适配UI框架的特殊要求（如Bootstrap）
  若使用了Bootstrap这类UI框架，仅添加/移除disabled类可能不够，还需要设置按钮的disabled属性。修改代码如下：

  const checkedCount = $("#emotion51 input:checkbox:checked").length;
  const submitBtn = $("#step4 button[type='submit']");
  
  if (checkedCount < 1) {
      console.log("checked<1");
      submitBtn.addClass("disabled").prop('disabled', true);
  } else {
      submitBtn.removeClass("disabled").prop('disabled', false);
  }
  

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