Отключить следующую навигационную ссылку в мастере начальной загрузки

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.

Затем вы можете добавить свое условие в функцию directcly или любой другой код, управляющий HTML.

И, наконец, добавив идентификатор к элементу, который вы хотите использовать, это сделает вашу жизнь намного проще.

Вот пример того, что она может выглядеть следующим образом:

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).