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

คุณสมบัติ disabled ของ Input Password ใน HTML DOM ใช้สำหรับตั้งค่าหรือคืนค่าว่าช่องรหัสผ่านถูกปิดใช้งานหรือไม่ ใช้ค่า Boolean: true = ปิดใช้งาน, false = ใช้งานได้ (ค่าเริ่มต้น) องค์ประกอบที่ถูกปิดใช้งานจะแสดงสีเทาและไม่สามารถคลิกหรือพิมพ์ได้

ไวยากรณ์ (Syntax)

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

passwordObject.disabled = true|false

• true = ปิดใช้งานช่องรหัสผ่าน
• false = เปิดใช้งาน (ค่าเริ่มต้น)

ตัวอย่าง

ตัวอย่างการปิดใช้งานช่องรหัสผ่าน:

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ disabled ของ Input Password</h1>
Password: <input type="password" id="PASS">
<p>คลิกปุ่ม DISABLE เพื่อปิดใช้งานช่องรหัสผ่านข้างบน</p>
<button type="button" onclick="disablePass()">DISABLE</button>
<p id="Sample"></p>
<script>
  function disablePass() {
    document.getElementById("PASS").disabled = true;
    document.getElementById("Sample").innerHTML = "ช่องรหัสผ่านถูกปิดใช้งานแล้ว";
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บ ช่องรหัสผ่านใช้งานได้ปกติ

เมื่อคลิกปุ่ม "DISABLE" ช่องรหัสผ่านจะเป็นสีเทาและใช้งานไม่ได้ พร้อมข้อความ "ช่องรหัสผ่านถูกปิดใช้งานแล้ว"

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

• สร้างช่องรหัสผ่าน id="PASS" ค่า disabled เริ่มต้นเป็น false
• สร้างปุ่ม "DISABLE" เรียกใช้ disablePass() เมื่อคลิก
• ฟังก์ชัน disablePass() ดึงช่องรหัสผ่าน ตั้งค่า .disabled = true
• ช่องรหัสผ่านจะถูกปิดใช้งาน (สีเทา, ไม่พิมพ์ได้) และแสดงข้อความยืนยัน