HTML DOM Fieldset disabled 屬性


HTML DOM Fieldset disabled 屬性用於停用給定 fieldset 中存在的元素組。如果該屬性設定為 true,則元素被停用,否則它們被啟用,這也設定為預設值。預設情況下,瀏覽器以灰色渲染停用的元素,使用者無法單擊或寫入這些元素。

語法

以下是語法 -

要設定 disabled 屬性 -

fieldsetObj.disabled = true|false

要返回 disabled 屬性 -

fieldsetObj.disabled

示例

讓我們看一個 Fieldset disabled 屬性的示例 -

活動演示

<!DOCTYPE html>
<html>
<head>
<script>
   function FieldDisable() {
      document.getElementById("FieldSet1").disabled = true;
   }
   function FieldEnable() {
      document.getElementById("FieldSet1").disabled = false;
   }
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form>
<fieldset id="FieldSet1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>
<br>
<button onclick="FieldEnable()">Enable</button>
<button onclick="FieldDisable()">Disable</button>
<p>Click on the enable button to enable the fieldset and disable to disable the fieldset</p>
</body>
</html>

輸出

這將產生以下輸出 -

單擊停用按鈕 -

在上面的示例中 -

我們首先建立了一個表單,其中元素使用具有 id 屬性且設定為 “Fieldset1” 的 <fieldset> 元素分組 -

<form>
<fieldset id="FieldSet1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>

然後我們建立了兩個按鈕 “啟用” 和 “停用”,分別執行 FieldEnable() 和 FieldDisable() 函式 -

<button onclick="FieldEnable()">Enable</button>
<button onclick="FieldDisable()">Disable</button>

fieldEnable() 和 FieldDisable() 函式分別將 fieldset disabled 屬性設定為 true 和 false。這使我們能夠啟用或停用存在於指定 fieldset 內的那些元素 -

function FieldDisable() {
   document.getElementById("FieldSet1").disabled = true;
}
function FieldEnable() {
   document.getElementById("FieldSet1").disabled = false;
}

更新日期:19-2-2021

323 個瀏覽量

開啟你的 職業生涯

透過完成課程並獲得認證

開始
廣告
© . All rights reserved.