zoukankan      html  css  js  c++  java
  • 如何使标签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");
             }
        });
    });        
  • 相关阅读:
    HTTP请求方法 GET POST【总结】
    Data Binding MVVM 数据绑定 总结
    Butter Knife 黄油刀
    原生JS强大DOM选择器querySelector与querySelectorAll
    JS日期Date详解与实例扩展
    JS中的冒泡排序以及实现一个数组中得最到最大的数字小例
    jquery.roundabout.js实现3D图片层叠旋转木马切换
    AngularJS 表格
    AngularJS XMLHttpRequest
    AngularJS Filters
  • 原文地址:https://www.cnblogs.com/waisonlong/p/4667852.html
Copyright © 2011-2022 走看看