以下是一个简单的例子,演示如何使用 disabled 属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset disabled 属性示例</title>
</head>
<body>
<form>
<fieldset id="myFieldset">
<legend>用户信息</legend>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button type="submit">提交</button>
</fieldset>
</form>
<script>
// 获取 <fieldset> 元素
var fieldsetElement = document.getElementById("myFieldset");
// 输出初始状态
console.log("初始状态:", fieldsetElement.disabled); // 输出 false
// 禁用 <fieldset> 中的所有表单元素
fieldsetElement.disabled = true;
// 输出禁用后的状态
console.log("禁用后的状态:", fieldsetElement.disabled); // 输出 true
</script>
</body>
</html>
在这个例子中,通过 JavaScript 获取了 <fieldset> 元素的 disabled 属性,并在控制台输出。然后,将 disabled 属性设置为 true,禁用了字段集内的所有表单元素,再次输出 disabled 属性的值,确认禁用状态。这个属性对于在表单中根据特定条件禁用或启用一组表单元素非常有用。
转载请注明出处:http://www.zyzy.cn/article/detail/4471/HTML