Modifying the DOM element properties

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:

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.