How to disable or enable form submit button in jQuery ?

Last Updated : 12 Jan, 2021

Given an HTML document and the task is to enable or disable the form submit button in jQuery.

Approach: To enable or disable the form submit button, we use the below code snippet.

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

In the above code, enabled is the id of the checkbox used and submit-button is the class name of the submit button used .

In the below implementation of the above approach, the jQuery-1.11.js contains the source code that found here ( jQuery v1.11.1 ).

Example: Below is the implementation of the above approach.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
  
    <title> 
        Disable/enable the form submit button 
    </title> 
  
    <script src="jQuery-1.11.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> 