Kendo Wizard组件自定义：实现任意步骤跳转功能

要让Kendo Wizard支持任意步骤直接点击跳转，而非仅前后移动一步，可以通过以下方式实现：

• 启用所有步骤的可点击状态
  在初始化Wizard时，确保每个步骤的enabled（jQuery版）或Enabled（ASP.NET Core Razor版）属性设为true，这是基础前提，保证步骤本身处于可交互状态。

• 覆盖默认导航限制
  默认情况下Wizard可能会限制只能逐步跳转，需要通过select事件自定义跳转逻辑，跳过默认的步数限制：

  以jQuery版为例：

  $("#wizard").kendoWizard({
    steps: [
      { title: "步骤1", enabled: true },
      { title: "步骤2", enabled: true },
      { title: "步骤3", enabled: true },
      { title: "步骤4", enabled: true }
    ],
    select: function(e) {
      e.preventDefault(); // 阻止默认的逐步导航限制
      this.select(e.step.index); // 直接跳转到选中的目标步骤
    }
  });
  

  如果是ASP.NET Core Razor版本，配置方式如下：

  @(Html.Kendo().Wizard()
    .Name("wizard")
    .Steps(s => {
        s.Add().Title("步骤1").Enabled(true);
        s.Add().Title("步骤2").Enabled(true);
        s.Add().Title("步骤3").Enabled(true);
        s.Add().Title("步骤4").Enabled(true);
    })
    .Events(ev => ev.Select("onWizardSelect"))
  )
  
  <script>
    function onWizardSelect(e) {
      e.preventDefault();
      this.select(e.step.index);
    }
  </script>
  

• 可选：添加步骤验证逻辑
  如果需要对跳转做验证（比如未完成当前步骤不允许跳转到后续），可以在select事件中加入判断逻辑，示例：

  function onWizardSelect(e) {
    // 假设步骤1未填写则不允许跳转到步骤4
    if (e.step.index === 3 && !$("#step1-input").val()) {
      alert("请先完成步骤1");
      e.preventDefault();
      return;
    }
    this.select(e.step.index);
  }
  

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