a標籤禁用onclick事件,60秒後生效

在項目中,咱們可能會碰到一些禁用某些標籤的事,好比說禁用button按鈕的點擊事件。對於button按鈕,只須要讓它的disabled屬性等於diabled或true,那這個按鈕就不會再觸發點擊事件了。可是,若是這個按鈕是一個a標籤,那disabled屬性再也不對a標籤起做用,由於a標籤中沒有這個屬性。html

我當時在項目中碰到這個問題時,着時糾結了半天。後來想到,既然要讓這個a標籤作成的按鈕不能點擊,那我先把它的click事件給解綁了,而後在須要的時候從新綁定不就能夠了嗎?想到就作,果真成功了。ajax

如下是代碼,需求是成功發送短信驗證碼後,60秒後纔可再次點擊從新發送。post

$(function(){
    var phoneBox = $('#phone');//手機號碼輸入框
    var phoneTipBox = $('#phone_tip');//手機號碼提示
    var getCodeBtn = $('#get_code');//獲取驗證碼按鈕
    var phoneCodeBox = $('#phone_code');//手機驗證碼輸入框
    
    //獲取短信驗證碼的方法
    var sendPhoneCode = function(){
	if (isPhoneCorrect){    //isPhoneCorrect表示輸入的手機號碼格式是否正確
	    var phone = phoneBox.val();
	    $.ajax({
		url : "/user/passport/register_send_code",
		type : "post",
		data : { phoneNo : phone},
		success : function(rdata){
		    if (rdata.errCode == 0){
    		        phoneTipBox.removeClass().addClass("onCorrect").html(rdata.errDesc);
    		        //獲取驗證碼成功後開始進行禁用倒計時
    		        reSendCountdown();
		    }else if (rdata.errCode == -1){
			phoneTipBox.removeClass().addClass("onError").html(rdata.errDesc);
		    }else {
			alert(rdata.errDesc);
		    }
		}
	    });
	}else {
	    phoneTipBox.removeClass().addClass("onError").html("手機號碼輸入錯誤!");
	    isPhoneCorrect = false;
	}
    }
	
    //60s後從新發送手機驗證碼
    var reSendCountdown = function(){
        var count = 60;//禁用時間爲60秒
        //解綁按鈕的點擊事件(該按鈕是一個a標籤)
        getCodeBtn.html(count+"秒後點擊從新發送").addClass("resend").unbind("click");
        var resend = setInterval(function(){
	    count--;
	    if (count > 0){
	        getCodeBtn.html(count+"秒後點擊從新發送");
	    }else {
		clearInterval(resend);//清除計時
		//從新綁定按鈕的click事件
		getCodeBtn.bind("click", sendPhoneCode).removeClass("resend").html("從新獲取驗證碼");
		phoneTipBox.removeClass().addClass("tishi").html("若是沒有收到短信,請點擊從新發送!");
	    }
	}, 1000);
    }
    //點擊按鈕觸發獲取短信驗證碼事件
    getCodeBtn.click(sendPhoneCode);
});
相關文章
相關標籤/搜索