在引导向导中禁用下一个导航链接 [重复]答案

【问题标题】：Disable next navigation link in bootstrap wizard [duplicate]在引导向导中禁用下一个导航链接 [重复]
【发布时间】：2016-10-23 14:13:16
【问题描述】：

我有一个简单的引导向导。我想根据某些条件禁用下一个导航链接。有人可以告诉我如何使用 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>

谢谢

【问题讨论】：

我在 a 标签中添加了一个 ID 并使用了这个 $("#nextNav").attr("disabled", "disabled");但它仍然可以导航。
您是否阅读了我链接到的帖子中的答案？

标签： javascript jquery css twitter-bootstrap

【解决方案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();
    }
});

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

在浏览器中使用 javascript，在调用一些处理 HTML 的函数之前，您需要等待文档对象模型完全加载。

您可以通过添加一个简单的document.ready 函数来实现。

然后您可以直接在函数中添加您的条件，或在任何其他操作 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）。

【讨论】：