求助：进度条运行时禁用按钮、完成后启用，初始按钮未禁用问题

我看到你遇到的问题了——初始状态下按钮没被禁用，而且进度条的逻辑还存在DOM加载顺序和重复ID的隐性问题。咱们一步步来修复：

核心问题点 #

• 你写的禁用按钮的匿名函数从未被执行，所以页面加载时不会触发禁用操作
• 按钮元素在script代码之后渲染，直接调用$("#btnSave")可能找不到目标元素（DOM未加载完成）
• 页面里存在两个id="progressTimer"的div，ID必须唯一，这会导致进度条插件绑定出错

修正后的完整代码 #

<!-- 先渲染DOM元素，确保脚本执行时能找到目标 -->
<input type="button" value="Save" id="btnSave" />
<div id="progressTimer"></div>

<!-- 先引入依赖库，再引入插件 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://www.jqueryscript.net/demo/Easy-jQuery-Progress-Bar-Timer-Plugin-For-Bootstrap-3-progressTimer/js/jquery.progressTimer.js'></script>

<script>
// 确保DOM完全加载后再执行代码
$(document).ready(function() {
    // 初始状态直接禁用按钮
    $("#btnSave").prop('disabled', true);

    // 初始化进度条插件
    $("#progressTimer").progressTimer({
        timeLimit: 30,
        warningThreshold: 10,
        baseStyle: 'progress-bar-warning',
        warningStyle: 'progress-bar-danger',
        completeStyle: 'progress-bar-info',
        onFinish: function () {
            // 进度条完成后启用按钮，用prop操作布尔属性更规范
            $("#btnSave").prop('disabled', false);
        }
    });
});
</script>

关键修改说明 #

1. 调整DOM顺序：把按钮和进度条容器放在脚本之前，确保浏览器先解析这些元素
2. 使用$(document).ready()：保证所有DOM加载完成后再执行JS逻辑，避免找不到元素的问题
3. 移除重复ID：删除了多余的id="progressTimer"容器，保证插件能正确绑定到唯一元素
4. 规范属性操作：用prop()替代attr()操作disabled布尔属性，这是jQuery官方推荐的做法（attr更适合字符串类型属性）

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