禁用特定标签

一个按钮，我有两个标签： -禁用特定标签

<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

禁用特定标签

回答

相关问题