jQuery Selectors: Enabled and disabled input box

This entry is part 25 of 33 in the series jQuery Selectors

:enabled, :disabled

Say you do not like the default background color of input textbox.  You can set them using selectors :enabled and :disabled.

The default for input box is enabled. If you have like the box to be disabled, you need to set it explicitly with :disabled.

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        $(function () {
            $('input:enabled').css('background-color', 'lime');
            $('input:disabled').css('background-color', 'darkblue');
        <legend>Contact information</legend>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
                <label for='tel'>Telephone number:</label>
                <input required type='tel' id='tel' name='tel'/>
                <label for='url'>Website:</label>
                <input required type='url' id='url' name='url' disabled/>
        <input type='submit' value='Submit this' />


Series Navigation<< jQuery Selectors: Selects elements that are in focus in the form
jQuery Selectors: Selects visible elements >>

Leave a comment

Leave a Reply