Modifying the DOM element properties
We can use jQuery to dynamically modify element properties such as class, style, and disabled, which means that it is possible to visually alter and change the function of a range of HTML elements.
Getting ready
Once again, this recipe requires an additional blank HTML document. Create a file named recipe-5.html, and have it open and ready for editing.
How to do it…
Learn how to alter the properties of the DOM element by performing each of the following steps:
- Add the following HTML code to your blank
recipe-5.htmlfile in order to create a basic HTML page with two types of inputs:<!DOCTYPE html> <html> <head> <title>Modifying DOM element attributes and properties</title> <script src="jquery.min.js"></script> <script> </script> </head> <body> <input type="checkbox" /> <input type="text" /> </body> </html>
- Within the preceding HTML code, add the following JavaScript code inside the script tags to disable the input, modify its value, and check the checkbox:
$(function(){ //Set the checkbox to be checked $('input[type="checkbox"]').prop('checked', true); //Disable any text inputs $('input[type="text"]').prop('disabled', true); //Change the value of any text inputs $('input[type="text"]').val("This is a new Value!"); });
How it works…
jQuery provides us with a prop() function that will either retrieve the specified property if no value is specified, or if a value is provided, it will alter the specified property on the selected element. This can be used to change property values such as checked on a checkbox or the disabled property on a text input. We could use the prop() function to alter the value of a text input; however, it is preferable to use the val() function that is available specifically for this task.
Typically, this would be done based on a user-triggered event, but to illustrate this as simply as possible, the following JavaScript does so on page load:
$(function(){
$('input[type="checkbox"]').prop('checked', true);
});This JavaScript will check each input within the page that is of the type checkbox. Similarly, we can alter the disabled state of a text input with only a few modifications:
$(function(){
$('input[type="text"]').prop('disabled', true);
});We can also use the val() function to add some text to each of these text inputs using the following JavaScript:
$(function(){
$('input[type="text"]').val("This is a new Value!");
});Often, you can chain functions with jQuery. You can achieve the previous two actions by using both the functions inline (that is, $('input[type="text"]').prop('disabled', true).val("This is a new Value!");), and they will be executed in turn.
See also
- Enabling and disabling buttons by changing their properties
- Adding and removing CSS classes to dynamically change their style
