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 readOnly Property
The HTML DOM Input Week readOnly property controls whether a week input field can be modified by the user. When set to true, the input becomes read-only and cannot be changed. This property is useful for displaying week values that should not be edited after certain conditions are met.
Syntax
Following is the syntax for getting the readOnly property value −
inputWeekObject.readOnly
Following is the syntax for setting the readOnly property −
inputWeekObject.readOnly = booleanValue
Return Value
The readOnly property returns a boolean value indicating whether the input week field is read-only or not.
Parameters
The readOnly property accepts a boolean value as parameter −
| Value | Description |
|---|---|
| true | Makes the input week field read-only (cannot be modified by user) |
| false | Makes the input week field editable (default behavior) |
Example − Setting ReadOnly Property
Following example demonstrates how to use the readOnly property to make a week input field read-only when a button is clicked −
<!DOCTYPE html>
<html>
<head>
<title>Input Week readOnly Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Selection</h2>
<form>
<fieldset style="padding: 15px; border: 2px solid #ccc;">
<legend>Examination Week</legend>
<label for="weekSelect">Select Week: </label>
<input type="week" id="weekSelect" value="2024-W10">
<br><br>
<button type="button" onclick="makeReadOnly()">Lock Week</button>
<button type="button" onclick="makeEditable()">Unlock Week</button>
<p id="status">Status: Editable</p>
</fieldset>
</form>
<script>
var weekInput = document.getElementById("weekSelect");
var status = document.getElementById("status");
function makeReadOnly() {
weekInput.readOnly = true;
status.textContent = "Status: Read-only (Locked)";
status.style.color = "red";
}
function makeEditable() {
weekInput.readOnly = false;
status.textContent = "Status: Editable";
status.style.color = "green";
}
</script>
</body>
</html>
The output shows a week input that can be locked or unlocked using the buttons. When locked, the field becomes read-only and cannot be modified −
Week Selection [Examination Week fieldset containing:] Select Week: [2024-W10 input field] [Lock Week] [Unlock Week] Status: Editable (changes to "Read-only (Locked)" in red when locked)
Example − Checking ReadOnly Status
Following example shows how to check if a week input field is currently read-only −
<!DOCTYPE html>
<html>
<head>
<title>Check ReadOnly Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Week Input ReadOnly Status</h2>
<label for="myWeek">Project Week: </label>
<input type="week" id="myWeek" value="2024-W15" readonly>
<br><br>
<button type="button" onclick="checkStatus()">Check ReadOnly Status</button>
<p id="result"></p>
<script>
function checkStatus() {
var weekInput = document.getElementById("myWeek");
var result = document.getElementById("result");
if (weekInput.readOnly) {
result.textContent = "The week input is READ-ONLY";
result.style.color = "red";
} else {
result.textContent = "The week input is EDITABLE";
result.style.color = "green";
}
}
</script>
</body>
</html>
The output displays the current read-only status of the week input field −
Week Input ReadOnly Status Project Week: [2024-W15 input field - grayed out] [Check ReadOnly Status] The week input is READ-ONLY (in red text)
Example − Dynamic ReadOnly Control
Following example demonstrates a practical use case where the week input becomes read-only after form submission −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic ReadOnly Control</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Registration Form</h2>
<form>
<label for="courseWeek">Course Start Week: </label>
<input type="week" id="courseWeek" value="2024-W20">
<br><br>
<button type="button" onclick="submitForm()">Submit Registration</button>
<button type="button" onclick="editForm()">Edit Registration</button>
<p id="message">Form is ready for input</p>
</form>
<script>
var weekInput = document.getElementById("courseWeek");
var message = document.getElementById("message");
function submitForm() {
weekInput.readOnly = true;
message.textContent = "Registration submitted! Week field is now locked.";
message.style.color = "blue";
}
function editForm() {
weekInput.readOnly = false;
message.textContent = "Edit mode enabled. Week field is unlocked.";
message.style.color = "green";
}
</script>
</body>
</html>
The output shows how the form controls the read-only state based on user actions −
Course Registration Form Course Start Week: [2024-W20 input field] [Submit Registration] [Edit Registration] Form is ready for input (changes based on button clicks)
Conclusion
The HTML DOM Input Week readOnly property provides control over whether users can modify week input fields. It returns a boolean value indicating the current state and accepts true or false to set the read-only behavior. This property is commonly used in forms where certain fields should become immutable after specific actions or conditions are met.
153 Views
