HTML - DOM disabled 屬性

HTML DOM 的disabled 屬性用於設定（更新）或獲取（檢索）<select> 元素的停用狀態。如果“選擇”欄位被停用，則返回布林值“true”，如果已啟用，則返回“false”。

當 disabled 屬性設定為 true 時，“選擇”元素對使用者輸入變得無效，使用者無法選擇它進行任何輸入。

語法

以下是 HTML DOM 的disabled（獲取停用屬性）屬性的語法：

selectObject.disabled

要更新（設定）disabled 屬性，請使用以下語法：

selectObject.disabled = true|false

引數

由於它是一個屬性，因此不接受任何引數。

返回值

此屬性返回一個布林值（true 或 false），表示 <select> 欄位是否被停用。

示例 1：檢索“選擇”欄位的停用狀態

以下程式演示瞭如何使用 HTML DOM 的disabled 屬性來檢索 <select> 元素的停用狀態：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM disabled</title>
</head>
<body>
<p>The below select field is disabled</p>
<select name="your_options" id="demo">
   <option value="html">HTML</option>
   <option value="css">CSS</option>
   <option value="javascript">JavaScript</option>
</select>
<p id="result"></p>
<script>
   let my_option = document.getElementById('demo');
   my_option.disabled = true;
   document.getElementById("result").innerHTML = "Is the select field is disabled: " + my_option.disabled;
</script>
</body>
</html>

示例 2：更新“選擇”欄位的停用狀態

以下是使用 HTML DOM 的disabled 屬性的另一個示例。我們使用此屬性來動態啟用已停用的 <select> 元素：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM disabled</title>
</head>
<body>
<p>Click the below button to enable the select field.</p>
<select name="your_options" id="demo" disabled>
   <option value="html">HTML</option>
   <option value="css">CSS</option>
   <option value="javascript">JavaScript</option>
</select>
<button id="en_btn">Enable</button>
<p id="result"></p>
<script>
   document.getElementById("en_btn").addEventListener("click", ()=>{
      document.getElementById("demo").disabled = false;
      document.getElementById('result').innerHTML = "Select field has been enabled.";
   });
</script>
</body>
</html>

示例 3：在停用和啟用之間切換

在此示例中，複選框控制 <select> 元素的disabled 屬性。選中複選框時，“選擇”將啟用，取消選中時將停用：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM disabled</title>
</head>
<body>
<p>Click the below checkbox to switch between disable and enable.</p>
<select name="your_options" id="demo" disabled>
   <option value="html">HTML</option>
   <option value="css">CSS</option>
   <option value="javascript">JavaScript</option>
</select>
<input type="checkbox" id="mycheckBox"><span id="msg">Allow me</span>
<p id="result"></p>
<script>
   document.getElementById("mycheckBox").addEventListener("click", ()=>{
      let status = document.getElementById('demo');
      if(status.disabled == true){
         status.disabled = false;
         document.getElementById('msg').innerHTML = "Remove access";
      }
      else{
         status.disabled = true;
         document.getElementById('msg').innerHTML = "Allow me";
      }
   });
</script>
</body>
</html>

支援的瀏覽器

屬性
值	是	是	是	是	是

列印頁面