HTML - disabled 属性

HTML disabled 是一个布尔属性，可以应用于各种表单元素，使它们无法交互或无法编辑。

当元素被禁用时，用户无法对其进行聚焦、点击或更改，并且它不会包含在表单提交中。它可以用于以下元素：<input>、<fieldset>、<button>、<textarea>、<select>、<option> 和 <optgroup> 等。

语法

<tag disabled>

应用于

以下列出的元素允许使用 HTML disabled 属性。

元素	描述
<input>	HTML <input> 标签用于指定输入字段。
<textarea>	HTML <textarea> 标签用于表示多行纯文本编辑控件。
<button>	HTML <button> 标签用于嵌入可点击按钮。
<fieldset>	HTML <fieldset> 标签用于在一个 Web 表单中对多个控件和标签进行分组。
<select>	HTML <select> 标签用于创建下拉列表以选择项目。
<option>	HTML <option> 标签用于命名下拉列表中的项目。
<optgroup>	HTML <optgroup> 用于在 select 元素中将相关的 option 元素组合在一起。

HTML disabled 属性示例

下面的示例将说明 HTML disabled 属性的用法，以及我们应该在哪里以及如何使用此属性！

禁用 input 元素

在以下示例中，我们将使用 disabled 属性和 input 字段。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML disabled attribute</title>
</head>

<body>
   <!--example of the 'disabled' attribute-->
   <p>'disabled' attribute with input element.</p> 
   Text(disabled): 
   <input type="text" 
      placeholder="Disabled"
      disabled>
   <input type="text" 
      placeholder="Not disabled">
</body>

</html>

禁用 button 元素

考虑另一种情况，我们将使用 disabled 属性和 button 元素。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML disabled attribute</title>
</head>

<body>
   <!--example of the 'disabled' attribute-->
   <p>'disabled' attribute with button element.</p>
   <button disabled>Disabled</button>
   <button>Not Disabled</button>
</body>

</html>

禁用 fieldset 元素

让我们看看下面的示例，我们将使用 disabled 属性和 fieldset 元素。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML disabled attribute</title>
</head>

<body>
   <!--example of the 'disabled' attribute-->
   <p>'disabled' attribute with fieldset element.</p>
   <fieldset disabled>
      <legend>Login Form</legend> 
      Username: 
      <input type="text" 
         placeholder="username">
      <br> 
         Password: 
      <input type="password" 
         placeholder="password">
      <br>
      <button>Login</button>
   </fieldset>
</body>

</html>

禁用 select 元素

在这个例子中，我们将使用 disable 属性禁用整个 select 标签。

<!DOCTYPE html>
<html>

<body>
<h1>Disabled Select Element</h1>
<form action="html/index.htm">
   <label for="fruits">Choose a fruit:</label>
   <select id="fruits" name="fruits" disabled>
      <option value="orange">Orange</option>
      <option value="lemon">Lemon</option>
      <option value="mango">Mango</option>
      <option value="pineapple">Pineapple</option>
   </select>
   <br><br>
   <input type="submit" value="Submit">
</form>

</body>
</html>

禁用下拉菜单中的 optgroup

在这个例子中，我们将使用 disabled 属性禁用 select 下拉菜单中的一组选项。

<!DOCTYPE html>
<html>
<body>

<h1>The optgroup disabled attribute</h1>

<form action="html/index.htm">
  <label for="fruits">Choose a fruit:</label>
  <select name="fruits" id="fruits">
    <optgroup label="Citrus Fruits">
      <option value="orange">Orange</option>
      <option value="lemon">Lemon</option>
    </optgroup>
    <optgroup label="Tropical Fruits" disabled>
      <option value="mango">Mango</option>
      <option value="pineapple">Pineapple</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

禁用下拉菜单中的 option

在这个代码中，我们将使用 disable 属性禁用下拉列表中的一个选项。

<!DOCTYPE html>
<html>
<body>

<h1>Option disabled attribute</h1>

<form action="html/index.htm">
  <label for="fruits">Choose a car:</label>
  <select>
    <option value="volvo" disabled>Volvo</option>
    <option value="Maruti">Maruti</option>
    <option value="vw">VW</option>
    <option value="car98">car98</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

禁用 textarea 元素

在这个例子中，我们将使用 disable 属性禁用一个 textarea 标签。

<!DOCTYPE html>
<html>
<body>

    <h1>The textarea disabled attribute</h1>
    
    <textarea disabled rows="7" cols="20">
        At tutorialspoint you have access to multiple 
        courses to upskill your knowledge. We offer free tutorials
        in all web development technologies.
    </textarea>

</body>
</html>

启用禁用元素的脚本

以下是一个例子，我们将使用 disabled 属性和 input 标签，并在点击按钮时使用 javascript 启用它。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Enable Text Input</title>
   <script>
      function enableInput() {
         document.getElementById("textInput").disabled = false;
      }
   </script>
</head>
<body>
   <h3>Click the button to enable text input</h3>
   <label for="textInput">Enter Text:</label>
   <input type="text" id="textInput" disabled>
   <button onclick="enableInput()">Enable Input</button>
</body>
</html>

支持的浏览器

属性
disabled	是	是	是	是	是

html_attributes_reference.htm

打印页面