How to disable and enable form elements with jQuery?

To disable form elements with jQuery, you can use the .prop() method to set the disabled property to true. To enable them, set the disabled property to false. Here's an example:

HTML:

<form>
  <input type="text" id="myInput" />
  <button type="submit">Submit</button>
</form>
<button id="disableBtn">Disable</button>
<button id="enableBtn">Enable</button>

JavaScript (jQuery):

$(document).ready(function() {
  // Disable form elements
  $('#disableBtn').click(function() {
    $('#myInput').prop('disabled', true);
    $(':input[type="submit"]').prop('disabled', true);
  });

  // Enable form elements
  $('#enableBtn').click(function() {
    $('#myInput').prop('disabled', false);
    $(':input[type="submit"]').prop('disabled', false);
  });
});

In this example, clicking the "Disable" button will disable the input field and the submit button. Clicking the "Enable" button will enable them again.

Remember to include the jQuery library in your HTML file for this code to work.