HTML DOM 按钮的 disabled 属性

htmlweb developmentfront end technology更新于 2025/9/22 22:36:17

HTML DOM 按钮的 disabled 属性与 <button> 元素的 disabled 属性相关联。按钮的 disabled 属性用于设置或返回给定按钮是否被禁用。它用于禁用按钮,以便用户无法再与指定元素交互。在 Web 浏览器中,设置 disabled 属性将默认使按钮变灰。

语法

以下是语法 −

设置 disabled 属性 −

buttonObject.disabled = true|false

此处,true|false 指定给定的输入按钮是否应被禁用。

  • True −按钮被禁用。
  • False −按钮不会被禁用。

让我们看一个按钮 disabled 属性的示例 −

示例

<!DOCTYPE html>
<html>
<body>
<button id="Button1">BUTTON</button>
<p>Click the below button to disable the above button.</p>
<button onclick="buttonDis()">CLICK IT</button>
<p id="Sample">
<script>
   function buttonDis() {
      document.getElementById("Button1").disabled = true;
      var x=document.getElementById("Button1").disabled;
      document.getElementById("Sample").innerHTML = "Button disabled is "+x;
   }
</script>
</body>
</html>

输出

这将产生以下输出 −

点击"CLICK IT"按钮时 −

在上面的例子中 −

我们创建了一个 id 为 “Button1” 的按钮,该按钮默认处于启用状态。

<button id="Button1>BUTTON</button>

然后,我们创建了"CLICK IT"按钮,以便在点击时执行 buttonDis() 方法。

<button onclick="buttonDis()">CLICK IT</button>

buttonDis() 方法通过 id "button1"获取按钮元素,并将其 disabled 属性设置为 true。禁用按钮后,其 disabled 值(true 或 false)将赋给变量 x,并显示在 id 为"Sample"的段落中。

function buttonDis() {
   document.getElementById("Button1").disabled = true;
   var x=document.getElementById("Button1").disabled;
   document.getElementById("Sample").innerHTML = "Button disabled is "+x;
}

相关文章


有用资源