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

Question

My modal work fine, but I want disabled temporally the link (role button). I find a solution but not work:

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

and the Jquery:

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

How to resolve this?

Thanks

Answer 1

Here is your correct way to achieve your requirement.

Add boostrap class "disabled" to your link and check it onclick event of your link. You can add or remove class "disabled" as per your need.

One more thing whenever you have no href link inside of ≶a> tag then use 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>