Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Month disabled Property
The HTML DOM Input Month disabled property allows you to check or modify whether an input field with type="month" is disabled or enabled. When disabled, the input field cannot receive focus, cannot be edited, and its value is not submitted with the form.
Syntax
Following is the syntax for returning the disabled status −
object.disabled
Following is the syntax for setting the disabled status −
object.disabled = true | false
Property Values
The disabled property accepts the following boolean values −
true − The input month field is disabled and cannot be interacted with
false − The input month field is enabled and can be interacted with (default)
Return Value
The property returns a boolean value indicating whether the input month field is disabled (true) or enabled (false).
Example − Getting Disabled Status
Following example demonstrates how to check if an input month field is disabled −
<!DOCTYPE html>
<html>
<head>
<title>Check Month Input Disabled Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Disabled Status</h2>
<label>Birth Month: </label>
<input type="month" id="birthMonth" disabled>
<br><br>
<button onclick="checkStatus()">Check Status</button>
<p id="result"></p>
<script>
function checkStatus() {
var monthInput = document.getElementById("birthMonth");
var isDisabled = monthInput.disabled;
document.getElementById("result").innerHTML =
"Input field is " + (isDisabled ? "disabled" : "enabled");
}
</script>
</body>
</html>
The output shows whether the input field is disabled or enabled −
Birth Month: [disabled month input field] [Check Status] Input field is disabled
Example − Toggle Disabled Status
Following example demonstrates how to enable and disable an input month field dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Month Input Disabled Status</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
max-width: 400px;
margin: 0 auto;
}
input[type="month"] {
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
input:disabled {
background-color: #f0f0f0;
color: #666;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
margin: 10px 5px;
}
button:hover { background: #0056b3; }
.message {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h2>Month Input Disabled Property</h2>
<label for="eventMonth">Select Event Month: </label>
<br><br>
<input type="month" id="eventMonth" value="2024-06">
<br><br>
<button onclick="disableInput()">Disable</button>
<button onclick="enableInput()">Enable</button>
<button onclick="toggleInput()">Toggle</button>
<div class="message" id="statusMessage">Input is currently enabled</div>
</div>
<script>
var monthInput = document.getElementById("eventMonth");
var statusMsg = document.getElementById("statusMessage");
function disableInput() {
monthInput.disabled = true;
statusMsg.textContent = "Input is now disabled";
}
function enableInput() {
monthInput.disabled = false;
statusMsg.textContent = "Input is now enabled";
}
function toggleInput() {
monthInput.disabled = !monthInput.disabled;
statusMsg.textContent = monthInput.disabled ?
"Input is now disabled" : "Input is now enabled";
}
</script>
</body>
</html>
The example provides three buttons to disable, enable, or toggle the input field's disabled state −
Select Event Month: [2024-06 month input field] [Disable] [Enable] [Toggle] Input is currently enabled
Example − Form Validation with Disabled Property
Following example shows how the disabled property can be used in form validation scenarios −
<!DOCTYPE html>
<html>
<head>
<title>Month Input with Conditional Disabling</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration Form</h2>
<form>
<label>
<input type="checkbox" id="hasDate" onchange="toggleMonthInput()">
I know the specific month for my event
</label>
<br><br>
<label>Event Month: </label>
<input type="month" id="eventDate" disabled>
<br><br>
<button type="button" onclick="checkFormStatus()">Check Form Status</button>
<p id="formStatus"></p>
</form>
<script>
function toggleMonthInput() {
var checkbox = document.getElementById("hasDate");
var monthInput = document.getElementById("eventDate");
monthInput.disabled = !checkbox.checked;
if (!checkbox.checked) {
monthInput.value = "";
}
}
function checkFormStatus() {
var monthInput = document.getElementById("eventDate");
var status = document.getElementById("formStatus");
if (monthInput.disabled) {
status.textContent = "Month field is disabled - checkbox not checked";
} else {
status.textContent = "Month field is enabled - value: " +
(monthInput.value || "No month selected");
}
}
</script>
</body>
</html>
The month input is enabled only when the checkbox is checked, demonstrating conditional form behavior −
? I know the specific month for my event Event Month: [disabled month input] [Check Form Status] Month field is disabled - checkbox not checked
Key Points
Disabled input fields cannot receive focus or user input
Disabled fields are not included in form submissions
The disabled property returns a boolean value (
trueorfalse)Setting
disabled = truemakes the field non-interactiveSetting
disabled = falsere-enables the field for user interactionDisabled inputs typically have different visual styling (grayed out appearance)
Conclusion
The HTML DOM Input Month disabled property provides control over the interactivity of month input fields. It's commonly used in dynamic forms where certain fields need to be conditionally enabled or disabled based on user selections or application logic.
199 Views
