使用JavaScript DOM操作来禁用文本框、按钮

最新推荐文章于 2024-05-20 15:59:22 发布

转载最新推荐文章于 2024-05-20 15:59:22 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://bbs.youkuaiyun.com/topics/190150747

文章标签：

#JavaScript

JavaScript 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何使用JavaScript控制网页上的按钮和文本框的状态，包括禁用、启用和隐藏元素。通过具体的代码实例，展示了如何响应用户操作，如点击复选框来改变其他元素的可见性和可用性。

一
<input type="button" value="禁用" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<script>
    document.getElementById("btn").onclick = function () {
      document.getElementById("txt").disabled = "disabled";
    };
</script>

二

<body>
  <form id="Form1" method="post" runat="server">
	<asp:CheckBox id="CheckBox1" runat="server" onclick="SetDisplay();"></asp:CheckBox>
	<asp:Button id="Button1" runat="server" Text="Button1"></asp:Button>
	<asp:Button id="Button2" runat="server" Text="Button2"></asp:Button>
  </form>
</body>

<script language="javascript">
function SetDisplay()
{
        if (document.getElementById('CheckBox1').checked)
	{
		document.getElementById('Button1').style.display='none';//隐藏
		document.getElementById('Button2').disabled=true;//不可用
	}
	else
	{
		document.getElementById('Button1').style.display='';//显示
		document.getElementById('Button2').disabled=false;//可用
	}
}
</script>

三

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
<script type="text/javascript">
function setDisplay(o)
{
    var b1 = document.getElementById("<%=Button1.ClientID%>");
    var b2 = document.getElementById("<%=Button2.ClientID%>");
    
    b1.style.display = o.checked?"":"none";
    b1.style.display = o.checked?"none":"";
}
</script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:CheckBox ID="CheckBox1" runat="server" onclick="setDisplay(this)"></asp:CheckBox>
            <asp:Button ID="Button1" runat="server" Text="Button1"></asp:Button>
            <asp:Button ID="Button2" runat="server" Text="Button2"></asp:Button>
        </div>
    </form>
</body>
</html>