Thuộc tính disabled của Input Month trong HTML DOM

Thuộc tính disabled của <input type="month"> cho phép trả về hoặc thiết lập trạng thái vô hiệu hóa (không thể chọn tháng). Khi disabled, input mờ đi và không tương tác được.

Cú pháp

Lấy giá trị:

monthInput.disabled

Thiết lập giá trị:

monthInput.disabled = true | false

Ví dụ: Bật/tắt input month

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body { height: 100%; margin: 0; font-family: sans-serif; }
        body {
            text-align: center; color: white;
            background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
        }
        input[type="month"] {
            width: 35%; border: 2px solid white; background: transparent;
            color: white; font-weight: bold; padding: 8px; margin: 10px auto; display: block;
        }
        .btn {
            background: #0197F6; border: none; color: white;
            padding: 10px 20px; border-radius: 4px; width: 35%;
            margin: 20px auto; display: block; cursor: pointer;
        }
        .show { font-size: 1.5rem; font-weight: bold; margin-top: 15px; }
    </style>
</head>
<body>
    <h1>Ví dụ Input Month disabled</h1>
    <p>Nhập tháng sinh của bạn</p>
    <input type="month" class="monthInput">
    <button onclick="toggleDisabled()" class="btn">Vô hiệu hóa/Kích hoạt</button>
    <div id="result" class="show"></div>
    <script>
        function toggleDisabled() {
            var input = document.querySelector(".monthInput");
            var msg = document.getElementById("result");
            msg.textContent = "";
            if (input.disabled) {
                input.disabled = false;
                msg.textContent = "Trước disabled, giờ enabled!";
            } else {
                input.disabled = true;
                msg.textContent = "Trước enabled, giờ disabled!";
            }
        }
    </script>
</body>
</html>

Kết quả

Input month bình thường:

Sau khi nhấn nút - input bị disabled (mờ):