Bootstrap：禁用模式 link（角色="button"）

Question

我的模式工作正常，但我想暂时禁用 link（角色按钮）。我找到了解决方案但没有用：

<span  data-target="#myModal"> 
<a href="#" id="disabled_share" class="btn-xs btn-info" role="button" data-toggle="tooltip" data-placement="bottom" title="title"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
</span>

                <div id="myModal" class="modal fade">
                 <div class="modal-dialog">
                  <div class="modal-content">
                   <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal</h4>
                   </div>
                   <div class="modal-body">
                        Modal body
                   </div>
                   <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-xs" data-dismiss="modal"><i class="fa fa-times-circle" aria-hidden="true"></i> Close</button>
                   </div>
                  </div>
                 </div>
            </div>

和 Jquery:

<script type="text/javascript">
$('#disabled_share').addClass('disabled');  
</script>

如何解决？

谢谢

Answer 1

这是您实现要求的正确方法。

将 boostrap class "disabled" 添加到您的 link 并检查它 link 的 onclick 事件。您可以根据需要添加或删除 class "disabled"。

当你在 ≶a> 标签内没有 href link 时还有一件事然后使用 javascript:void(0);

$("#disabled_share").on("click",function(){
  if(!($(this)).hasClass("disabled")) {
 $('#myModal').modal('show');
  }
});

<span> 
  <a href="javascript:void(0);" id="disabled_share" class="btn-xs btn-info disabled" role="button" data-toggle="tooltip" data-placement="bottom" title="title">
      <i class="fa fa-share-alt" aria-hidden="true"></i>
  </a>
</span>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal</h4>
      </div>
      <div class="modal-body">
        Modal body
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-xs" data-dismiss="modal"><i class="fa fa-times-circle" aria-hidden="true"></i> Close</button>
      </div>
    </div>
  </div>
</div>

Bootstrap：禁用模式 link（角色="button"）

Bootstrap: Disabled modal link (role="button")

jquery

modal-dialog

disabled-control

twitter-bootstrap