禁用特定標籤

一個按鈕，我有兩個標籤： -禁用特定標籤

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

我想，當我點擊是'查看詳情'選項卡上的刪除按鈕和添加按鈕被禁用，反之亦然。我該如何實現這一目標？

來源

2017-03-01 shreya gupta

我們可以看到你是如何檢測被點擊的標籤？ –

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

，並檢查所有事件

來源

2017-03-01 08:12:28 Hikmat

我會一類diableButton添加到link這將觸發禁用功能，使用下面的代碼。

這條線$(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>

來源

2017-03-01 08:14:05

非常歡迎 –

@shreyagupta如果是您選擇的解決方案，請接受答案。是說謝謝的最佳方式！ – amicoderozer

您可以使用.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

來源

2017-03-01 08:15:34 Jai

禁用特定標籤

回答

相關問題