最後のタブでブートストラップウィザードの次のボタンを無効にする方法は？

Question

マニュアルや情報が見つかりませんでした。どうすればブートストラップタブの次のボタンを無効にすることができますか？

.bootstrapWizard({ 
    tabClass: 'nav nav-tabs', 
    onTabClick: function(tab, navigation, index) { 
     return validateTab(index); 
    }, 
    onNext: function(tab, navigation, index) { 
     var numTabs = $('#reservationForm').find('.tab-pane').length, 
      isValidTab = validateTab(index - 1); 
     if (!isValidTab) { 
      return false; 
     } 

     if (index === numTabs -1) { 

     } 

     return true; 
    }, 
    onPrevious: function(tab, navigation, index) { 
     return validateTab(index + 1); 
    }, 
    onTabShow: function(tab, navigation, index) { 
     // Update the label of Next button when we are at the last tab 
     var numTabs = $('#reservationForm').find('.tab-pane').length; 
     $('#reservationForm') 
      .find('.next') 
      .removeClass('disabled') // Enable the Next button 
      .find('a') 
      .html(index === numTabs - 1 ? 'Install' : 'Next'); 

    } 
}); 

Answer 1

私はあなたのような5つのタブを持っています。最初の/最後のタブのpreviousボタンとnextボタンを無効にする私の方法です。

onTabShow: function(tab, navigation, index) { 

     switch (index) { 
      case 0: 
       // remove 'previous' 

       $('ul.pager.wizard li.previous').addClass('hidden'); 
       break; 
      case 1: 
      case 2: 
      case 3: 
       $('ul.pager.wizard li.previous, ul.pager.wizard li.next').removeClass('hidden'); 
       break; 
      case 4: 
       // remove 'next' 

       $('ul.pager.wizard li.next').addClass('hidden'); 
       break; 
     } 

     var $total = navigation.find('li').length; 
     var $current = index + 1; 
     var $percent = ($current/$total) * 100; 
     $('#pills .progress-bar').css({ 
      width: $percent + '%' 
     }); 
    }