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 Week disabled Property
The HTML DOM Input Week disabled property sets or returns whether an input week field is enabled or disabled. When a week input is disabled, users cannot interact with it, and its value is not submitted with the form.
Syntax
Following is the syntax for returning the disabled state −
inputWeekObject.disabled
Following is the syntax for setting the disabled state −
inputWeekObject.disabled = booleanValue
Parameters
The booleanValue can be one of the following −
| Value | Description |
|---|---|
true |
The input week field is disabled (grayed out and non-interactive). |
false |
The input week field is enabled (default state, users can interact with it). |
Return Value
The property returns a Boolean value −
trueif the input week field is disabledfalseif the input week field is enabled
Example − Checking Disabled State
Following example demonstrates how to check if a week input is disabled −
<!DOCTYPE html>
<html>
<head>
<title>Check Week Input Disabled State</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Input Disabled Check</h2>
<label for="week1">Enabled Week: </label>
<input type="week" id="week1" value="2024-W10"><br><br>
<label for="week2">Disabled Week: </label>
<input type="week" id="week2" value="2024-W15" disabled><br><br>
<button onclick="checkStatus()">Check Status</button>
<p id="result"></p>
<script>
function checkStatus() {
var week1 = document.getElementById("week1");
var week2 = document.getElementById("week2");
var result = document.getElementById("result");
result.innerHTML = "Week 1 disabled: " + week1.disabled + "<br>" +
"Week 2 disabled: " + week2.disabled;
}
</script>
</body>
</html>
The output shows the disabled state of both week inputs −
Week 1 disabled: false Week 2 disabled: true
Example − Enabling and Disabling Week Input
Following example shows how to dynamically enable and disable a week input field −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Week Input Disabled State</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Sales Target Week Control</h2>
<fieldset style="padding: 15px; margin: 10px 0;">
<legend>Week Selection</legend>
<label for="salesWeek">Sales Target Week: </label>
<input type="week" id="salesWeek" value="2024-W13" disabled><br><br>
<button onclick="toggleWeekInput()">Toggle Week Input</button>
<button onclick="checkState()">Check State</button><br><br>
<div id="status" style="padding: 10px; background: #f0f0f0;"></div>
</fieldset>
<script>
var inputWeek = document.getElementById("salesWeek");
var statusDiv = document.getElementById("status");
function toggleWeekInput() {
inputWeek.disabled = !inputWeek.disabled;
updateStatus();
}
function checkState() {
updateStatus();
}
function updateStatus() {
var state = inputWeek.disabled ? "disabled" : "enabled";
statusDiv.innerHTML = "Week input is currently: <b>" + state + "</b><br>" +
"Disabled property: " + inputWeek.disabled;
}
// Show initial state
updateStatus();
</script>
</body>
</html>
Initially, the week input is disabled. Clicking "Toggle Week Input" alternates between enabled and disabled states −
Week input is currently: disabled Disabled property: true (After toggle) Week input is currently: enabled Disabled property: false
Example − Form Submission Behavior
Following example demonstrates that disabled week inputs are not submitted with form data −
<!DOCTYPE html>
<html>
<head>
<title>Disabled Week Input Form Submission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form Submission Test</h2>
<form id="testForm" onsubmit="handleSubmit(event)">
<label for="enabledWeek">Enabled Week: </label>
<input type="week" id="enabledWeek" name="enabledWeek" value="2024-W20"><br><br>
<label for="disabledWeek">Disabled Week: </label>
<input type="week" id="disabledWeek" name="disabledWeek" value="2024-W25" disabled><br><br>
<button type="submit">Submit Form</button>
<button type="button" onclick="toggleDisabled()">Toggle Disabled Week</button>
</form>
<div id="output" style="margin-top: 20px; padding: 10px; background: #f9f9f9;"></div>
<script>
function handleSubmit(event) {
event.preventDefault();
var formData = new FormData(document.getElementById("testForm"));
var output = document.getElementById("output");
var result = "<b>Form Data Submitted:</b><br>";
for (let [key, value] of formData.entries()) {
result += key + ": " + value + "<br>";
}
output.innerHTML = result + "<br><i>Note: Disabled fields are not included.</i>";
}
function toggleDisabled() {
var disabledWeek = document.getElementById("disabledWeek");
disabledWeek.disabled = !disabledWeek.disabled;
}
</script>
</body>
</html>
When the form is submitted, only the enabled week input value is included in the form data. The disabled week input is excluded from submission.
Key Points
Disabled week inputs appear grayed out and cannot be clicked or modified by users
Disabled inputs do not participate in form submission
The disabled property can be dynamically changed using JavaScript
Disabled inputs can still be accessed and modified programmatically via JavaScript
The default value for the disabled property is
false(enabled)
Conclusion
The HTML DOM Input Week disabled property provides control over the interactivity of week input fields. Setting disabled = true prevents user interaction and form submission, while disabled = false restores normal functionality. This property is essential for creating dynamic forms with conditional field availability.
178 Views
