HTML DOM Fieldset 的 disabled 属性
htmlweb developmentfront end technology更新于 2024/5/29 10:20:17
HTML DOM Fieldset 的 disabled 属性用于禁用给定字段集中的元素组。如果此属性设置为 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>
输出
这将产生以下输出 −
点击"禁用"按钮 −
在上面的例子中 −
我们首先创建了一个表单，该表单使用 <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() 函数分别将字段集的 disabled 属性设置为 true 和 false。这使我们能够启用或禁用指定字段集中的元素 −
function FieldDisable() {
document.getElementById("FieldSet1").disabled = true;
}
function FieldEnable() {
document.getElementById("FieldSet1").disabled = false;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
