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.
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.
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!"); });
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.