js怎么实现按钮点过一次以后就变为灰色，即使刷新页面也不能点击

JavaScript08

js怎么实现按钮点过一次以后就变为灰色，即使刷新页面也不能点击,第1张

将这种状态保存下来不就行了。比如说你想做一个签到页面，数据库里面保存你当天的签到状态为0，页面上获取这个状态，为0的时候可以点击，点击后改变状态保存，为1的时候不可点击，为避免重复点击可以使用回调函数，点击之后先将disabled改为true然后提交状态到后台，这样就算刷新，只要你的状态是1就不可点

直接试用disable不同浏览器及版本的兼容例外多,不建议直接disable超链接.

以下通过调整样式和行为的方式实现上述需求:

定义一个超链接"变成"普通html文本的样式

在某个行为中触发"变灰"

在原链接的事件中加入如果已经有"变灰"的class则直接返回

在另外的行为中恢复"正常"

以下为模拟的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

<style>

/* "变灰"效果*/

.disableHref{

    cursor:default

color:#E5E0E0

text-decoration:none

}

</style>

  <script>

  // 禁用超链接-"变灰"

function  disableHref(){

    var hrefDom = document.getElementById("testHref")

hrefDom.className+=" disableHref"

}

 // 启用超链接-"正常"

function  enableHref(){

    var hrefDom = document.getElementById("testHref")

hrefDom.className=hrefDom.className.replace(" disableHref","")

}

 // 超链接点击事件

function hrefClick(){

    var target=event.target

    if(target.className.indexOf("disableHref")>-1){

     // 加入判断,有"变灰"时返回

     return false

}

// do something u need

// for example

alert("jump previous")

}

  </script>

 </HEAD>

 <BODY>

  <a href="javascript:" id="testHref" onclick="hrefClick()" class="ttt">test href</a>

  <input type="button" id="btnDisableHref" onclick="disableHref()" value="Disable href" />

  <input type="button" id="btnEnableHref" onclick="enableHref()" value="Enable href" />

 </BODY>

</HTML>

纯js是不是太麻烦?如果用jquery的话 ,就很简单了:

$("#buttonId").click(function(){

  test()

})

function test(){

    $("#buttonId").die("click")//把事件取消了

    $.post("图片地址",function(){

        $("#buttonId").click(function(){

            test()

        })

    })

}