คุณสมบัติ disabled ของ Fieldset ใน HTML DOM

คุณสมบัติ disabled ของ Fieldset ใน HTML DOM ใช้สำหรับปิดใช้งาน (disable) กลุ่มองค์ประกอบที่อยู่ภายใน fieldset นั้น หากตั้งค่าเป็น true องค์ประกอบภายในจะถูกปิดใช้งาน หาก false จะเปิดใช้งาน (ค่าเริ่มต้น) องค์ประกอบที่ถูกปิดใช้งานจะแสดงสีเทาโดยค่าเริ่มต้นของเบราว์เซอร์ และผู้ใช้ไม่สามารถคลิกหรือพิมพ์ได้

ไวยากรณ์ (Syntax)

การตั้งค่าคุณสมบัติ disabled:

fieldsetObject.disabled = true|false

การอ่านค่าคุณสมบัติ disabled:

fieldsetObject.disabled

ตัวอย่าง

ตัวอย่างการเปิด/ปิดใช้งาน fieldset และองค์ประกอบภายใน:

<!DOCTYPE html>
<html>
<head>
<script>
  function FieldDisable() {
    document.getElementById("FieldSet1").disabled = true;
  }
  
  function FieldEnable() {
    document.getElementById("FieldSet1").disabled = false;
  }
</script>
</head>
<body>
<h1>ตัวอย่างฟอร์ม</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>คลิกปุ่ม Enable เพื่อเปิดใช้งาน fieldset และ Disable เพื่อปิดใช้งาน</p>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บ จะแสดงฟอร์มที่มี fieldset "User Data" พร้อมช่องป้อนข้อมูล 3 ช่อง ทำงานได้ปกติ และปุ่ม Enable, Disable

เมื่อคลิกปุ่ม "Disable" ช่องป้อนข้อมูลทั้งหมดใน fieldset จะเป็นสีเทาและใช้งานไม่ได้

เมื่อคลิกปุ่ม "Enable" ช่องป้อนข้อมูลจะกลับมาทำงานได้ปกติ

คำอธิบายโค้ด

• สร้างฟอร์มมี <fieldset id="FieldSet1"> ครอบช่อง Name, Address, Age
• สร้างปุ่ม "Enable" เรียก FieldEnable() และ "Disable" เรียก FieldDisable()
• FieldDisable() ตั้งค่า disabled = true ปิดใช้งานทุกอย่างใน fieldset
• FieldEnable() ตั้งค่า disabled = false เปิดใช้งานคืน
• วิธีนี้สะดวกกว่าการปิดใช้งานแต่ละช่องแยกกัน