Q:

How to disable or enable a form element using jQuery

mhmadesk
Save to bookmark
|
2022-05-18
|
  510 
Very Easy
0

How to disable or enable a form element using jQuery

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this 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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now