私は2つのタブが持っている特定のタブ

Question

ためのボタンを無効にします -

<div class="modal-body"> 
    <form name="myForm" novalidate="novalidate"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a data-toggle="tab" href="#basicInfo">Info</a></li> 
     <li><a data-toggle="tab" href="#view">View Details</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="basicInfo" class="tab-pane fade in active modal-table-div"> 
     ..... 
    </div> 
    <div id="view" class="tab-pane modal-table-div fade"> 
    ..... 
    </div> 
</div> 

および削除と追加ボタンボタンを：私は上のクリックしたときに

<div class="modal-footer"> 
    <button type="button" class="btn btn-danger">Delete</button> 
    <button type="button" class="btn btn-success">Add</button> 
</div> 

私が欲しいのです'詳細の表示'タブの削除ボタンと追加ボタンが無効になり、それを無効にします。どのように達成する必要がありますか？

Answer 1

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    var href= $(e.target).attr("href"); 
    // check href here and do what you want 
}); 

と、すべてのイベント

Answer 2

ため​​をチェックし、私は以下のコードを使用して、ディスエーブル機能をトリガしなければならlinkにクラスdiableButtonを追加します。

この行$(this).find("a").hasClass("diableButton")は、linkにそのクラスがあるかどうかを尋ねます。

$('.nav-tabs li').click(function() { 
 
    if ($(this).find("a").hasClass("diableButton")) { 
 
    $('.modal-footer button').prop("disabled", true); 
 
    } else { 
 
    $('.modal-footer button').prop("disabled", false); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="modal-body"> 
 
    <form name="myForm" novalidate="novalidate"> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"><a data-toggle="tab" href="#basicInfo">Info</a></li> 
 
     <li><a data-toggle="tab" class="diableButton" href="#view">View Details</a></li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
     <div id="basicInfo" class="tab-pane fade in active modal-table-div"> 
 
     ..... 
 
     </div> 
 
     <div id="view" class="tab-pane modal-table-div fade"> 
 
     ..... 
 
     </div> 
 
    </div> 
 

 
    <div class="modal-footer"> 
 
     <button type="button" class="btn btn-danger">Delete</button> 
 
     <button type="button" class="btn btn-success">Add</button> 
 
    </div>

Answer 3

あなたはボタンを無効にする.prop()メソッドを使用することができます。

var isViewTab = $('.modal-body li.active a').attr('href') === "#view"; 
$(".modal-body").find(".btn-danger,.btn-success") // get the modal buttons 
       .prop('disabled', isViewTab) // disabled them 
       .toggleClass('disabled', isViewTab); // add a class to style them disbled