如何在jQuery Smart Wizard 4中默认禁用Finish按钮并在最后一步启用？

数据老陈

2026-5-15

解决jQuery Smart Wizard 4中Finish按钮的启用/禁用控制问题

嘿，我刚好对jQuery Smart Wizard 4的按钮控制比较熟，这个需求其实很好实现，咱们分两步来搞定：

1. 初始化时默认禁用Finish按钮

Smart Wizard 4默认会让Finish按钮处于启用状态，所以我们需要在插件初始化完成后立刻把它禁用掉。你可以用插件的onInit回调来做这件事，这样能保证在页面加载完成后第一时间生效：

$(document).ready(function() {
    $('#smartwizard').smartWizard({
        // 这里放你的其他配置，比如主题、默认选中步骤等
        selected: 0,
        theme: 'default',
        onInit: function() {
            // 禁用Finish按钮，同时加上插件自带的disabled类来应用禁用样式
            $('.sw-btn-finish').prop('disabled', true).addClass('disabled');
        }
    });
});

2. 监听步骤切换，到达最后一步时启用Finish按钮

接下来需要监听步骤切换事件stepChanged，每次切换步骤时判断当前是否是最后一步，如果是就启用按钮，否则保持禁用：

// 继续在ready函数里添加这段代码
$('#smartwizard').on('stepChanged', function(e, anchorObject, stepNumber, stepDirection) {
    // 获取总步骤数
    const totalSteps = $('#smartwizard').smartWizard('getTotalSteps');
    // 注意：stepNumber是从0开始计数的，所以要加1和总步骤数对比
    if (stepNumber + 1 === totalSteps) {
        // 到达最后一步，启用Finish按钮
        $('.sw-btn-finish').prop('disabled', false).removeClass('disabled');
    } else {
        // 不是最后一步，保持禁用
        $('.sw-btn-finish').prop('disabled', true).addClass('disabled');
    }
});