1

我正在使用 SmartWizard 插件创建一个向导表单来输入新的用户详细信息。我有一个自定义的“提交”按钮，在用户到达表单的最后一步第 5 步之前应该禁用该按钮。

通过 SmartWizard 的leaveStep功能，我应该能够跟踪当前幻灯片何时更改为第 5 步，但事实证明这是超级不可靠和错误的。从第 4 步切换到第 5 步时，有一半的时间按钮没有被激活，但是当我从第 5 步切换回第 4 步时，按钮又被激活。如果我刷新并从第 1 步 > 2 > 3 > 转到第 4 步，它没有激活。

谁能告诉我这里有什么问题？

谢谢

智能向导

$('#smartwizard').smartWizard({
    selected: 0, // Initial selected step, 0 = first step
    theme: 'default', // theme for the wizard, related css need to include for other than default theme
    justified: true, // Nav menu justification. true/false
    darkMode: false, // Enable/disable Dark Mode if the theme supports. true/false
    autoAdjustHeight: true, // Automatically adjust content height
    cycleSteps: false, // Allows to cycle the navigation of steps
    backButtonSupport: true, // Enable the back button support
    enableURLhash: false, // Enable selection of the step based on url hash
    // onFinish: onFinishCallback,
    // onCancel: onCancelCallback,
    transition: {
        animation: 'fade', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
        speed: '400', // Transion animation speed
        easing: '' // Transition animation easing. Not supported without a jQuery easing plugin
    },
    toolbarSettings: {
        toolbarPosition: 'bottom', // none, top, bottom, both
        toolbarButtonPosition: 'center', // left, right, center
        showNextButton: true, // show/hide a Next button
        showPreviousButton: true, // show/hide a Previous button
        toolbarExtraButtons: [
            $('<button id="newUserSubmit" class="btn btn-sm btn-primary-bordered" disabled><i class="fa fa-check mr-15"></i> Submit</button>')
        ] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
    },
    anchorSettings: {
        anchorClickable: false, // Enable/Disable anchor navigation
        enableAllAnchors: false, // Activates all anchors clickable all times
        markDoneStep: false, // Add done state on navigation
        markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
        removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
        enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
    },
    keyboardSettings: {
        keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
        keyLeft: [37], // Left key code
        keyRight: [39] // Right key code
    },
    lang: { // Language variables for button
        next: 'Next >',
        previous: '< Previous'
    },
    disabledSteps: [], // Array Steps disabled
    errorSteps: [], // Highlight step with errors
    hiddenSteps: [] // Hidden steps
});

LeaveStep 事件

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {

    // enable Submit button only on last step
    if (stepNumber == 4) {
        $('#newUserSubmit').prop('disabled', false);
    } else {
        $('#newUserSubmit').prop('disabled', true);
    }

});

编辑：澄清为什么代码中的计步器说4. SmartWizard 将第一步计为 [0]，将第二步计为 [1]，将第三步计为 [2]，等等。我的第五步和最后一步将是 [4]。

4

1 回答 1

1 
$(function () {
    $('#smartwizard').smartWizard({
        toolbarSettings: {
            toolbarExtraButtons: [
                $('<button id="submitButton" class="btn btn-info" disabled="disabled">Finish</button>')
            ]
        }
    }).on("stepContent", function (e, anchorObject, stepIndex, stepDirection) {
        $('#submitButton').prop('disabled', stepIndex !== 3);
    });
});

// the stepIndex value shows correct at "stepContent" event only ( may be it has some other functionality on other events )

// 在这个例子中，有 4 个步骤（索引从 0 开始，以 3 结束）

于 2021-11-11T14:16:11.987 回答