Disable or Enable Multiple Inputs Fields on Button Click

by

In this blog post, We learn to Disable or Enable multiple Inputs Fields on Button Click.

In this example we use querySelectorAll() and disable property to enable and disable input field, querySelectorAll() returns a static (not live) NodeList representing a list of the document’s elements that match the specified group of selectors.

The disabled property sets or returns whether a text field is disabled, or not. A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Disable and enable buttons with text inputs</title>
</head>
<body>
  
  
    <input type="text" id="input-1" value="Example text..." />
    <input type="text" id="input-2" value="Example text..." />
    <input type="text" id="input-3" value="Example text..." />
    <button id="button1" onclick="disable()">disable</button>
    <button id="button2" onclick="enable()">enable</button>
  
  

</body>
</html>

javascript.js

  <script>
      function disable() {
        document.querySelectorAll('input').forEach(element => element.disabled = true);
      }
  
      function enable() {
        document.querySelectorAll('input').forEach(element => element.disabled = false);
      }
    </script>