如何在 FuelUX 向导的第 1 步禁用 NEXT 按钮答案

【问题标题】：How to disable NEXT button on step 1 of FuelUX Wizard如何在 FuelUX 向导的第 1 步禁用 NEXT 按钮
【发布时间】：2015-05-27 08:59:06
【问题描述】：

我正在使用 FuelUX 向导插件创建向导控制页面 http://getfuelux.com/javascript.html#wizard

我正在尝试仅在向导的 STEP1 上禁用 NEXT 按钮。

请查看此图片以更好地理解： http://i.imgur.com/xlhwu2j.png

我很想在这方面得到一些帮助。让我知道我是否需要任何东西。

【问题讨论】：

您想在 Step1 中禁用 Next 按钮。那么你想如何重新启用它以及你想如何导航到下一步？？？只是因为图像没有为我打开而询问，如果您将完整的要求放在这里会很好。
嗨大师..我将在里面添加一个按钮并通过jquery触发下一步。
好的。所以你不想要下一个按钮，而你有一个替代按钮，它的功能正确吗？？
是的，但仅限于第 1 步
好的。正在努力..

标签： javascript jquery wizard fuelux jquery-steps

【解决方案1】：

在阅读了燃料 ux 文档后，这里似乎有一个 hack，它允许您禁用特定步骤而无需修改任何源 fuelux.js 代码。

    $wizard.on('actionclicked.fu.wizard', function (evt) {

    //Check the current step 
    var currentStep = $wizard.wizard('selectedItem').step;

    //If current step needs to be disabled, disable it and then return.
    if (currentStep === 1)
    {
        evt.preventDefault();
        return; 
    }



});

请注意$wizard 只是我在燃料用户体验documentation 中描述的$('#myWizard') 的说法。

【讨论】：

【解决方案2】：

我真的尝试了人们给出的所有建议。我不知道为什么似乎没有一个对我有用。可能是因为我没有提供足够的信息。在我尝试的几种方法中。我发现这个是最简单的。

protected void NextButton_Click(object sender, WizardNavigationEventArgs e)
{
       //Suppose You have a control on your webpage. Just check if it has
       //the information you require. In my case lblpasskeytextbox
       //and if the condtion is not fulfilled I am not letting user to move
       //next page
        if (lblPasskeyInformation.Text[0] == 'I')
        {
            e.Cancel = true;
            return;
        }
}

【讨论】：

【解决方案3】：

好的。经过大量研究，我为您提供了这个解决方案。您需要修改插件fuelux.js。取未缩小版本的fuelux.js 并找到下面的代码行

var canMovePrev = ( this.currentStep > 1 ); //remember, steps index is 1 based...
var isFirstStep = ( this.currentStep === 1 );
var isLastStep = ( this.currentStep === this.numSteps );

// disable buttons based on current step
if ( !this.options.disablePreviousStep ) {
         this.$prevBtn.attr( 'disabled', ( isFirstStep === true || canMovePrev === false ) );
}

// change button text of last step, if specified
var last = this.$nextBtn.attr( 'data-last' );
if(isFirstStep) //Add this line
{
    this.$nextBtn.attr( 'disabled', ( isFirstStep === true || canMoveNext === false ) );
}

上面的行你可以在setState: function() {找到它行号3652

如果您遇到任何问题，请告诉我

编辑：并与您一起使用备用下一个按钮，您可以将其编写如下

$(document).ready(function(){
   $('.btnext').on('click',function(){
         $('.wizard').wizard('next');
         $nextBtn = $('.wizard').find( 'button.btn-next' );
         $nextBtn.removeAttr('disabled');
    });
});

在任何你想要的地方添加你的备用按钮，然后添加一个类 btnext 到它。

【讨论】：