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.
|
1 |
<input type="checkbox" disabled="disabled" /> |
Using JavaScript
To disable an input element using JavaScript we access the disabled property on the element and set it accordingly.
|
1 2 3 4 5 |
// 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.
|
1 2 3 4 5 |
// 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
That is going to do it for this post! Leave any comments/questions/concerns below and thanks for stopping by the blog!