HTML DOM Input FileUpload disabled Property: ปิด/เปิดช่องอัปโหลด

คุณสมบัติ disabled ของ file upload คืนค่าและกำหนดสถานะการปิดใช้งานช่องอัปโหลดไฟล์

รูปแบบ (Syntax)

อ่านค่า:

object.disabled

กำหนดค่า:

object.disabled = true | false

ตัวอย่างการใช้งาน

สลับสถานะเปิด/ปิดช่องอัปโหลด:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { background-color: #397367; color: #fff; padding: 10px; }
        p { font-size: 1.2rem; }
        input { width: 200px; border: none; margin: 10px 0; }
        .btn { display: block; margin: 10px 0; background-color: #22223B; color: #fff; border: none; height: 30px; border-radius: 50px; font-weight: bold; padding: 0.5rem 1rem; cursor: pointer; outline: none; }
    </style>
</head>
<body>
    <h1>ตัวอย่าง FileUpload disabled Property</h1>
    <p>คุณสามารถเลือกไฟล์ได้ไหม?</p>
    <input type="file">
    <button onclick="enableDis()" class='btn'>Enable/Disable Choose File</button>
    <script>
        function enableDis() {
            var chooseFileBtn = document.querySelector("input");
            if (chooseFileBtn.disabled === true) {
                chooseFileBtn.disabled = false;
            } else {
                chooseFileBtn.disabled = true;
            }
        }
    </script>
</body>
</html>

ลักษณะเมื่อ disabled

• ไม่สามารถคลิกหรือเลือกไฟล์ได้
• แสดงในสีจาง (grayed out)
• ไม่ส่งไฟล์เมื่อ submit ฟอร์ม
• CSS :disabled pseudo-class ใช้จัดสไตล์ได้

การใช้งานจริง

ปิดใช้งานช่องอัปโหลดจนกว่าจะเลือกตัวเลือกอื่น:

var fileInput = document.querySelector("input[type='file']");
var checkbox = document.querySelector("#hasAttachment");
checkbox.addEventListener("change", function() {
    fileInput.disabled = !this.checked;
});