How to disable or enable form submit button in jQuery?

Last Updated : 18 Jun, 2024

Enabling or disabling the form submit button based on a checkbox selection in jQuery. This ensures user compliance with terms and conditions before form submission.

Syntax:

$('#enabled').click(function () {
    if ($('#submit-button').is(':disabled')) {
        $('#submit-button').removeAttr('disabled');
    } else {
        $('#submit-button').attr('disabled', 'disabled');
    }
});

Example 1: The example shows jQuery to dynamically enable/disable the submit button based on the checkbox state, ensuring terms acceptance before submission. It structures HTML with a checkbox and submit button, complemented by CSS for styling.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <title>
        Disable/enable the form submit button
    </title>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js">
  	</script>

    <style>
        h1 {
            color: green;
            margin-left: 12px;
        }

        .checkbox-round {
            width: 1.0em;
            height: 1.0em;
            background-color: white;
            border-radius: 50%;
            vertical-align: middle;
            border: 1px solid #ddd;
            -webkit-appearance: none;
            outline: none;
            cursor: pointer;
            padding-right: 2px;
            margin-left: 8px;
        }

        .checkbox-round:checked {
            background-color: green;
        }

        #submit-button {
            margin-top: 12px;
            margin-left: 12px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <input class="checkbox-round" id="enabled" 
           name="enabled" type="checkbox" value="y" />
    I accept the terms and
    conditionof GeeksforGeeks<br>

    <input id="submit-button" disabled="disabled" 
           name="Submit" type="submit" value="Accept" />

    <script>
        $('#enabled').click(function () {
            if ($('#submit-button').is(':disabled')) {
                $('#submit-button').removeAttr('disabled');
            } else {
                $('#submit-button').attr('disabled', 'disabled');
            }
        });
    </script>
</body>

</html>

Output:

Output

Example 2: In this example the jQuery to dynamically enable or disable the submit button based on checkbox selection, ensuring terms acceptance before submission. It features styled UI elements, including a checkbox for agreement and a visually distinct submit button.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Toggle Submit Button</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  	</script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            text-align: center;
        }

        #checkbox-label {
            font-weight: bold;
        }

        #submitButton {
            padding: 10px 20px;
            border: none;
            background-color: #007bff;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #submitButton:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>

<body>

    <h1>Toggle Submit Button</h1>

    <div>
        <label id="checkbox-label" 
               for="agree-checkbox">
          Agree to Terms:
      	</label>
        <input type="checkbox" 
               id="agree-checkbox">
    </div>

    <br>

    <button id="submitButton" disabled>
      Submit
  	</button>

    <script>
        $(document).ready(function () {
            $('#agree-checkbox').change(function () {
                $('#submitButton').prop('disabled', !$(this)
                                  .is(':checked'));
            });
        });
    </script>

</body>

</html>