Please note, this is a STATIC archive of website www.tutorialrepublic.com from 10 Sep 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to disable or enable a form element using jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery prop() method

You can simply use the jQuery prop() method to disable or enable form elements or controls like <input>, <select>, <textarea>, etc. dynamically using jQuery.

The prop() method require jQuery 1.6 and above. Let's see how this works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable or Enable an Input with jQuery</title>
<style>
    label {
        display: block;
        margin: 10px 0;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('form input[type="submit"]').prop("disabled", true);
        $(".agree").click(function(){
            if($(this).prop("checked") == true){
                $('form input[type="submit"]').prop("disabled", false);
            }
            else if($(this).prop("checked") == false){
                $('form input[type="submit"]').prop("disabled", true);
            }
        });
    });
</script>
</head>
<body>
    <form>
        <label>Name: <input type="text" name="username"></label>
        <label>Email: <input type="email" name="email"></label>
        <label><input type="checkbox" class="agree"> I agree to terms and conditions.</label>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates