HTML DOM Fieldset disabled屬性用法及代碼示例

HTML DOM Fieldset disabled 屬性用於禁用給定字段集中存在的元素組。如果此屬性設置為 true，則元素將被禁用，否則它們將被啟用，默認情況下也是如此。瀏覽器默認將禁用的元素呈現為灰色，用戶無法單擊或寫入這些元素。

用法

以下是語法 -

設置禁用屬性 -

fieldsetObj.disabled = true|false

返回禁用的屬性 -

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>

輸出

這將產生以下輸出 -

單擊禁用按鈕 -

在上麵的例子中 -

我們首先創建了一個表單，其中的元素使用 <fieldset> 元素分組，id 屬性設置為 “Fieldset1” -

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

然後我們創建了兩個按鈕 “Enable” 和 “Disable”，它們將分別執行 FieldEnable() 和 FieldDisable() 函數 -

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

fieldEnable() 和 FieldDisable() 函數將 fieldset disabled 屬性分別設置為 true 和 false。這允許我們啟用或禁用指定字段集中存在的那些元素 -

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

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Fieldset disabled property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。