禁用引導向導中的下一個導航鏈接

Question

我有一個簡單的引導向導。我想根據某些條件禁用下一個導航鏈接。有人可以告訴我如何使用jQuery或CSS或任何其他方法來做到這一點。

<div id="rootwizard"> 
       <div class="navbar"> 
        <div class="navbar-inner"> 
         <div class="container"> 
          <ul> 
           <li><a href="#tab1" data-toggle="tab">Item Search</a></li> 
           <li><a href="#tab2" data-toggle="tab">Item Details</a></li> 
           <li><a href="#tab3" data-toggle="tab">Add SPR</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 

       <div class="tab-content"> 
       <ul class="pager wizard"> 
         <li class="previous first" style="display: none;"><a href="#">First</a></li> 
         <li class="previous"><a href="#">Previous</a></li> 
         <li class="next last" style="display: none;"><a href="#">Last</a></li> 
         <li class="next"><a href="#">Next</a></li> 
        </ul> 
</div> 

感謝

Answer 1

下面的代碼應該工作。

基本上，它檢測到標籤已更改的時間，然後刪除可能存在的任何禁用的屬性。然後根據點擊的標籤有一個if語句來設置鏈接是否可以被點擊。之後，如果點擊禁用的鏈接，則無需執行任何操作。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
     var target = $(e.target).attr("href"); 

    $(".wizard a").removeAttr("disabled"); 

    if(target == "#tab3"){ 
     $(".next").attr("disabled","disabled"); 
    } 
    else if(target == "#tab1"){ 
     $(".previous").attr("disabled","disabled"); 
    } 

}); 

$(".wizard a").on("click", function(event){ 
    if ($(this).is("[disabled]")) { 
     event.preventDefault(); 
    } 
}); 

Answer 2

更新：使用.prop('disabled',true)代替.attr('disabled','disabled')

沒有看到你的代碼的其餘部分是具有挑戰性的給出理想的答案您的具體情況，但你應該能夠設置一個布爾並在允許「下一步」按鈕之前檢查它。

您也可以應用一些CSS來禁用按鈕LOOK。

var nextOK = true; 
 
$('#mybutt').click(function(){ 
 
    $('#nextA').prop('disabled',true).css({'color':'red'}); //display:none, or whatever. 
 
    nextOK = false; 
 
}); 
 
$('#nextA').click(function(e){ 
 
    if (nextOK) window.location.href = 'http://google.com'; 
 
    else alert('Button disabled'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div id="rootwizard"> 
 
    <div class="navbar"> 
 
    <div class="navbar-inner"> 
 
     <div class="container"> 
 
     <ul> 
 
      <li><a href="#tab1" data-toggle="tab">Item Search</a> 
 
      </li> 
 
      <li><a href="#tab2" data-toggle="tab">Item Details</a> 
 
      </li> 
 
      <li><a href="#tab3" data-toggle="tab">Add SPR</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="tab-content"> 
 
    <ul class="pager wizard"> 
 
     <li class="previous first" style="display: none;"><a href="#">First</a> 
 
     </li> 
 
     <li class="previous"><a href="#">Previous</a> 
 
     </li> 
 
     <li class="next last" style="display: none;"><a href="#">Last</a> 
 
     </li> 
 
     <li class="next"><a id="nextA" href="#">Next</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    
 
    <button id='mybutt'>Disable Next Button</button>

Answer 3

在瀏覽器中的JavaScript，你所需要的文檔對象模型前，等待調用某些功能操作HTML之前已完全加載。

您可以通過添加簡單的document.ready函數來實現該功能。

然後，您可以在函數direcly或任何其他處理HTML的代碼中添加條件。

最後，通過爲要使用的元素添加一個id，它會讓您的生活變得更加輕鬆。

這裏是它可能是什麼樣子的樣本：

document.ready = function() { 
    //Your condition 
    if(42 >= 1){ 
     //Select the element and make it point to a void 
     $('#nextLink').attr('href', 'javascript:void(0)'); 
    } 
} 

使用javascript:void是一個真正的跨瀏覽器解決方案和對舊版本的作品（如良好的老IE）。