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 Number disabled Property
The HTML DOM Input Number disabled property is used to get or set whether an input field of type="number" is disabled or not. When an input number field is disabled, it becomes non-interactive and cannot receive user input, and its value is not submitted with the form.
Syntax
Following is the syntax for returning the disabled property −
object.disabled
Following is the syntax for setting the disabled property −
object.disabled = true | false
Property Values
The disabled property accepts the following boolean values −
true − The input number field is disabled and cannot be interacted with.
false − The input number field is enabled and can receive user input (default state).
Return Value
The disabled property returns a boolean value indicating whether the input number field is disabled (true) or enabled (false).
Example − Toggle Disabled State
Following example demonstrates how to toggle the disabled state of a number input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Number Disabled Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; text-align: center; }
.container { max-width: 500px; margin: 0 auto; }
input[type="number"] {
width: 200px;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 4px;
margin: 10px;
}
input[type="number"]:disabled {
background-color: #f5f5f5;
color: #999;
cursor: not-allowed;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 10px;
}
.btn:hover { background-color: #45a049; }
.status {
margin: 20px;
padding: 10px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Input Number Disabled Property</h1>
<p>Enter your age:</p>
<input type="number" id="ageInput" min="1" max="120" placeholder="Enter age">
<br>
<button onclick="toggleDisabled()" class="btn">Toggle Disabled</button>
<button onclick="checkStatus()" class="btn">Check Status</button>
<div id="status" class="status"></div>
</div>
<script>
function toggleDisabled() {
const ageInput = document.getElementById("ageInput");
const statusDiv = document.getElementById("status");
if (ageInput.disabled) {
ageInput.disabled = false;
statusDiv.innerHTML = "? Input field is now ENABLED";
statusDiv.style.color = "green";
} else {
ageInput.disabled = true;
statusDiv.innerHTML = "? Input field is now DISABLED";
statusDiv.style.color = "red";
}
}
function checkStatus() {
const ageInput = document.getElementById("ageInput");
const statusDiv = document.getElementById("status");
if (ageInput.disabled) {
statusDiv.innerHTML = "Current status: DISABLED";
statusDiv.style.color = "red";
} else {
statusDiv.innerHTML = "Current status: ENABLED";
statusDiv.style.color = "green";
}
}
</script>
</body>
</html>
The example shows two buttons: one to toggle the disabled state and another to check the current status. When disabled, the input field appears grayed out and cannot be interacted with.
Example − Form Validation with Disabled Property
Following example demonstrates using the disabled property in form validation scenarios −
<!DOCTYPE html>
<html>
<head>
<title>Conditional Number Input</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; max-width: 600px; margin: 0 auto; }
.form-group { margin: 15px 0; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, select {
width: 100%;
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
input:disabled { background-color: #f0f0f0; color: #666; }
.submit-btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Employment Form</h2>
<form>
<div class="form-group">
<label>Employment Status:</label>
<select id="employmentStatus" onchange="toggleSalaryField()">
<option value="">Select Status</option>
<option value="employed">Employed</option>
<option value="unemployed">Unemployed</option>
<option value="student">Student</option>
</select>
</div>
<div class="form-group">
<label>Monthly Salary (USD):</label>
<input type="number" id="salaryInput" min="0" step="100" placeholder="Enter salary" disabled>
</div>
<div class="form-group">
<label>Years of Experience:</label>
<input type="number" id="experienceInput" min="0" max="50" placeholder="Years" disabled>
</div>
<button type="button" class="submit-btn" onclick="showFormData()">Show Form Data</button>
<div id="result" style="margin-top: 20px; font-weight: bold;"></div>
</form>
<script>
function toggleSalaryField() {
const status = document.getElementById("employmentStatus").value;
const salaryInput = document.getElementById("salaryInput");
const experienceInput = document.getElementById("experienceInput");
if (status === "employed") {
salaryInput.disabled = false;
experienceInput.disabled = false;
} else {
salaryInput.disabled = true;
experienceInput.disabled = true;
salaryInput.value = "";
experienceInput.value = "";
}
}
function showFormData() {
const status = document.getElementById("employmentStatus").value;
const salary = document.getElementById("salaryInput").value;
const experience = document.getElementById("experienceInput").value;
const result = document.getElementById("result");
let message = `Employment Status: ${status}`;
if (!document.getElementById("salaryInput").disabled) {
message += `<br>Salary: $${salary || 'Not specified'}`;
message += `<br>Experience: ${experience || 'Not specified'} years`;
} else {
message += "<br>Salary and experience fields are disabled for this status.";
}
result.innerHTML = message;
}
</script>
</body>
</html>
This example shows how the disabled property can be used for conditional form fields. The salary and experience number inputs are only enabled when "Employed" is selected.
Example − Reading Disabled Property
Following example demonstrates how to read the current disabled state of a number input −
<!DOCTYPE html>
<html>
<head>
<title>Reading Disabled Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; text-align: center; }
input[type="number"] {
padding: 10px;
font-size: 16px;
margin: 10px;
border: 2px solid #ddd;
border-radius: 4px;
}
.btn {
background-color: #17a2b8;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
.output {
margin: 20px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 4px;
display: inline-block;
}
</style>
</head>
<body>
<h2>Reading Disabled Property</h2>
<input type="number" id="testInput" placeholder="Test input" min="1" max="100">
<br>
<button onclick="disableInput()" class="btn">Disable</button>
<button onclick="enableInput()" class="btn">Enable</button>
<button onclick="readProperty()" class="btn">Read Property</button>
<div id="output" class="output">Click "Read Property" to see the current state</div>
<script>
function disableInput() {
document.getElementById("testInput").disabled = true;
}
function enableInput() {
document.getElementById("testInput").disabled = false;
}
function readProperty() {
const input = document.getElementById("testInput");
const output = document.getElementById("output");
const isDisabled = input.disabled;
output.innerHTML = `
<strong>Property Value:</strong> ${isDisabled}<br>
<strong>Data Type:</strong> ${typeof isDisabled}<br>
<strong>Status:</strong> ${isDisabled ? 'DISABLED' : 'ENABLED'}
`;
}
</script>
</body>
</html>
This example shows how to read the disabled property value, demonstrating that it returns a boolean value indicating the current state.
Key Points
The disabled property is a boolean attribute that controls interactivity of number input fields.
Disabled input fields do not submit their values with form data.
The property can be both read (to check current state) and written (to change state).
Disabled inputs are typically styled differently by browsers (grayed out appearance).
The property is useful for conditional form fields and dynamic user interfaces.
Conclusion
The HTML DOM Input Number disabled property provides a simple way to control whether number input fields are interactive or not. It accepts boolean values and is commonly used in dynamic forms where certain fields should be conditionally enabled or disabled based on user selections or form validation requirements.
251 Views
