คุณสมบัติ disabled ของ Button
คุณสมบัติ disabled ที่เกี่ยวข้องกับแอตทริบิวต์ disabled ของอิลิเมนต์ <button> ใช้สำหรับตั้งค่าหรือคืนค่าว่าปุ่มถูกปิดใช้งานหรือไม่ ใช้ปิดใช้งานปุ่มเพื่อไม่ให้ผู้ใช้โต้ตอบได้ การตั้งค่า disabled จะทำให้ปุ่มเป็นสีจาง (grayed out) ในเบราว์เซอร์โดยค่าเริ่มต้น
ไวยากรณ์ (Syntax)
การกำหนดค่า disabled
buttonObject.disabled = true|false
ค่า:
- true - ปุ่มถูกปิดใช้งาน
- false - ปุ่มไม่ถูกปิดใช้งาน (ปกติ)
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการปิดใช้งานปุ่ม
<!DOCTYPE html>
<html>
<body>
<button id="Button1">BUTTON</button>
<p>Click the below button to disable the above button.</p>
<button onclick="buttonDis()">CLICK IT</button>
<p id="Sample"></p>
<script>
function buttonDis() {
document.getElementById("Button1").disabled = true;
var x = document.getElementById("Button1").disabled;
document.getElementById("Sample").innerHTML = "Button disabled is " + x;
}
</script>
</body>
</html>
ผลลัพธ์
เริ่มต้น: ปุ่ม BUTTON ใช้งานได้ปกติ
คลิก CLICK IT: ปุ่ม BUTTON ถูกปิดใช้งาน (สีจาง, ไม่คลิกได้) แสดง "Button disabled is true"
คำอธิบายเพิ่มเติม
- ปุ่มที่
disabledจะไม่รับ event (click, focus, etc.) - ไม่ส่งค่า name/value ไปกับ form submission
- CSS pseudo-class:
:disabledสำหรับ styling,:enabledสำหรับปุ่มปกติ - สามารถ toggle ได้:
button.disabled = !button.disabled - ใช้กันทั่วไป: ป้องกัน double submit, รอ validation, รอ AJAX response
- ทำงานกับ form elements อื่นๆ:
<input>,<select>,<textarea>,<fieldset>,<optgroup>,<option>
