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

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

如果没有看到代码的其余部分，那么为您的情况提供理想的答案很有挑战性，但您应该能够设置布尔值并在允许“下一步”按钮之前检查它。

您也可以应用一些CSS来使按钮LOOK也被禁用。

＆＃13;

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');
});

＆＃13;

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

＆＃13;

Answer 2

以下代码应该有效。

基本上它会检测选项卡何时更改，然后删除可能存在的任何已禁用属性。然后根据单击的选项卡，有一个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 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）。

禁用引导向导中的下一个导航链接

3 个答案: