如何使标签a处于不可用状态

今天做项目的时候突然发现a标签下用disabled无法使它的点击事件失效(貌似ie下可以,没有测试过),

首先说一下项目要求,点击a标签(点击之后以防多次快速点击,这里需要点击后使标签a实现),触发ajax提交数据,成功后回调函数里

再使其恢复点击可用:

$('#goaid').click(function(){
     $( this).prop("disabled", true);//无法使a标签失效
        $.ajax({
            url:'check.php',
            type:'POST',
            data:{
            'mobile':$('#mobile').val()
            },
            dataType:'json',
            success:function(response){
                if(response.result==1) {
                    //数据处理
                }else{
                    //数据处理
                }
            }
        });
   });

因为之前处理这种情况一直是用button处理,一直没有留意a不支持disbled

现在要说解决方案了

第一种:设置一个全局变量

$(function(){
   var flag = 1;
   $('#goaid').click(function(){
       if( flag == 1){
            flag = 0;
            $.ajax({
                url:'check.php',
                type:'POST',
                data:{
                'mobile':$('#mobile').val()
                },
                dataType:'json',
                success:function(response){
                    flag = 1;
                    if(response.result==1) {
                           //数据处理 
                    }else{
                        //数据处理
                    }
                }
            });
       }
   });
});

第二种:将两个元素叠在一起

只是个人的一种想法,做两个相同样子的元素(其中一个为触发元素)

function kai(){
  $("#kai").hide();
  $("#guan").show();
}
function guan(){
  $("#kai").show();
  $("#guan").hide();
}

第三种:动态添加和删除class

$('.class').click(function(){
       if($(this).hasClass("op_disable")){
        return false;
    }
    $(this).addClass("op_disable");
    $.ajax({
    ....
        success:function(){
              $(this).removeClass("op_disable");
         }
    });
});        
原文地址:https://www.cnblogs.com/waisonlong/p/4667852.html