Home > Article > Web Front-end > Detailed explanation of disabling and enabling JS buttons

Detailed explanation of disabling and enabling JS buttons

php中世界最好的语言Original: 2018-04-16 11:05:584012browse

This time I will bring you a detailed explanation of the use of disabling and enabling JS buttons. What are the precautions for disabling and enabling JS buttons. Here are actual cases, let’s take a look.

Without further ado, I will post the code directly for you. The specific code is as follows:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按钮启用和禁用</title>
<script type="text/javascript">
function btn1()
{
 document.getElementById("btn1").disabled=true;
 document.getElementById("btn1").innerHTML="禁用按钮1";
 document.getElementById("btn2").disabled=false;
 document.getElementById("btn2").innerHTML="启用按钮2";
 }
 //按钮2
function btn2()
{
 document.getElementById("btn1").disabled=false;
 document.getElementById("btn1").innerHTML="启用按钮1";
 document.getElementById("btn2").disabled=true;
 document.getElementById("btn2").innerHTML="禁用按钮2";
 }
</script>
</head>
<body>
<p style="position:absolute;left:400px;top:200px">
<button id="btn1" onclick="btn1();" style="width:100px;height:100px; ">按钮1</button>
<button id="btn2" onclick="btn2();" style="width:100px;height:100px; margin-left:100px ">按钮2</button>
</p>
</body>
</html>

I believe that you have mastered the method after reading the case in this article. Please give me more exciting information. Pay attention to other related articles on php Chinese website!

Detailed explanation of disabling and enabling JS buttons

Related articles