부트 스트랩 : 무효 모달 링크 (역할 = "버튼")

Question

모달은 잘 작동하지만 일시적으로 링크 (역할 버튼)를 비활성화하고 싶습니다. 나는 해결책을 찾을 작동하지 :

<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

귀하의 요구 사항을 충족시키는 올바른 방법은 다음과 같습니다.

링크에 "사용 중지됨"클래스를 추가하고 링크의 click 이벤트를 확인하십시오. 필요에 따라 "비활성화 됨"클래스를 추가하거나 제거 할 수 있습니다.

≶ > 태그 내부에 href 링크가 없을 때마다 한가지 더 javascript : void (0);

$("#disabled_share").on("click",function(){ 
 
    if(!($(this)).hasClass("disabled")) { 
 
\t $('#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>