Disable Inputs with HTML, JavaScript, and jQuery

In this post we learn how to disable input elements with HTML, JavaScript, and jQuery. With JavaScript and jQuery we can modify the disabled attribute to disable/enable elements when needed.

Using HTML

To disable an input using HTML all we need to do is add the disabled attribute to our input element.

Using JavaScript

To disable an input element using JavaScript we access the disabled property on the element and set it accordingly.

// disable element so it is greyed out and not editable
document.getElementById("element_id").disabled = 'disabled';

// enable element so input element is editable
document.getElementById("element_id").disabled = '';

Using jQuery

To disable input elements using jQuery we use the “.prop” jquery function to set the disabled attribute.

// disable element so it is greyed out and not editable
$( '#element_id' ).prop( 'disabled', 'disabled' );

// enable element so input element is editable
$( '#element_id' ).prop( 'disabled', '' );

Links

YouTube Video

Code on GitHub

Live Example

That is going to do it for this post! Leave any comments/questions/concerns below and thanks for stopping by the blog!