人员添加页面想让添加按钮点完之后变成灰色并禁用

问题描述：

添加按钮点完之后会有一个加载的过程这个时候继续点添加按钮会把数据再录一遍为了防止这个操作就像把按钮在录数据的过程中变为灰色禁用掉对前端不是很会

答

使用button的disabled属性当点击添加后立即把disabled变为true然后等接口返回成功后变为false

大概是这样 jq的话有attr设置一搜就有

//伪代码
<button disabled="false" id="add">添加</button>

//js
let btn=document.getElementById("add");

btn.addListener("click",(){
 btn.disabled=true;
 ajax('url').then((res)=>{
   if(res.status==200){ //代表成功
   btn.disabled=false;
  }
 })
})

答

那录入完成后还可以点吗？那你干脆直接判断按下之后就给按钮禁用掉。录入完成以后再判断是否成功失败。如果成功就依旧禁用，如果失败就解禁

答

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>渲染流程</title>
    </head>
    <body>
        <button id='addBtutton' onclick='add()'>添加<button>
    </body>    
    <script>
        function add(){
            //进入开始请求后台阶段前
            var button = document.querySelector('#addBtutton')
            button.setAttribute('disabled','disabled')
            //你的后台请求成功替代setTimeout
		    setTimeout(()=>{
			    if(button.getAttribute('disabled')){
				    button.removeAttribute('disabled')
			    }
		    },1000)
        }
    </script>
</html>

人员添加页面 想让添加按钮点完之后变成灰色并禁用

相关推荐

人员添加页面想让添加按钮点完之后变成灰色并禁用