Disable Input Field using jQuery or JavaScript
While performing front-end applications you may need to disable input fields dynamically based on certain conditions or user interactions. In this article, we’ll explore how to disable input fields using both jQuery and plain JavaScript, demonstrating practical examples with full HTML code.
Disable Input Field when Checkbox is Checked using jQuery
Let’s consider a simple form with a text input field and a checkbox. Below is the complete HTML code that demonstrates how to disable the text input when the checkbox is checked.
jQuery code snippet
$(document).ready(function() {
// Select the checkbox and input field
var checkbox = $('#disable-checkbox');
var inputField = $('#text-input');
// Disable input field initially if checkbox is checked on page load
inputField.prop('disabled', checkbox.prop('checked'));
// Bind a change event to the checkbox
checkbox.change(function() {
// Toggle the disabled property of the input field based on checkbox status
inputField.prop('disabled', this.checked);
});
});Full HTML code with jQuery. Copy & paste it in Notepad and try it yourself.
.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Input Field Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>Disable Input Field - jQuery Example</h2>
<br>
<form>
<label for="text-input">Text Input:
<input type="text" id="text-input" name="text-input">
</label>
<label>
<input type="checkbox" id="disable-checkbox"> Disable Input
</label>
</form>
<script>
$(document).ready(function() {
// Select the checkbox and input field
var checkbox = $('#disable-checkbox');
var inputField = $('#text-input');
// Disable input field initially if checkbox is checked on page load
inputField.prop('disabled', checkbox.prop('checked'));
// Bind a change event to the checkbox
checkbox.change(function() {
// Toggle the disabled property of the input field based on checkbox status
inputField.prop('disabled', this.checked);
});
});
</script>
</body>
</html>
Enable/ Disable Textbox Field on Checkbox Click using Javascript
You can achieve the same output using Javascript code.
JavaScript code snippet
document.addEventListener('DOMContentLoaded', function() {
// Select the checkbox and input field
var checkbox = document.getElementById('disable-checkbox');
var inputField = document.getElementById('text-input');
// Disable input field initially if checkbox is checked on page load
inputField.disabled = checkbox.checked;
// Attach a change event to the checkbox
checkbox.addEventListener('change', function() {
// Toggle the disabled property of the input field based on checkbox status
inputField.disabled = this.checked;
});
});Here is the complete HTML code using jQuery. Just copy and paste it into Notepad and try it on your own. This example will produce the same result as well.
.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Input Field Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>Disable Input Field - JavaScript Example</h2>
<br>
<form>
<label for="text-input">Text Input:
<input type="text" id="text-input" name="text-input">
</label>
<label>
<input type="checkbox" id="disable-checkbox"> Disable Input
</label>
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Select the checkbox and input field
var checkbox = document.getElementById('disable-checkbox');
var inputField = document.getElementById('text-input');
// Disable input field initially if checkbox is checked on page load
inputField.disabled = checkbox.checked;
// Attach a change event to the checkbox
checkbox.addEventListener('change', function() {
// Toggle the disabled property of the input field based on checkbox status
inputField.disabled = this.checked;
});
});
</script>
</body>
</html>
Output – screenshot:
