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

最新推荐文章于 2024-07-21 02:53:05 发布

转载最新推荐文章于 2024-07-21 02:53:05 发布 · 269 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/waisonlong/p/4667852.html

本文探讨了在项目中遇到的问题，即A标签使用disabled属性无法使点击事件失效，并提供了三种解决方案：设置全局变量、将两个元素叠在一起、动态添加和删除class，帮助开发者在前端开发中解决类似问题。

今天做项目的时候突然发现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