Как сделать так, что бы кнопка становилась disabled, если не заполнены инпуты?

от
prokoding.ru > JavaScript > Как сделать так, что бы кнопка становилась disabled, если не заполнены инпуты?

Для достижения данного функционала вам потребуется использовать JavaScript для проверки заполненности инпутов и изменения свойства disabled у кнопки. Вот примерный алгоритм действий:

1. Назначьте обработчики событий на инпуты, чтобы отслеживать изменения в них.
2. В обработчике события проверьте каждый инпут на заполненность. Если все инпуты заполнены, активируйте кнопку, иначе деактивируйте её.
3. Изменяйте свойство disabled кнопки в зависимости от результата проверки.

Пример кода:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Button Example</title>
</head>
<body>
  <input type="text" id="input1">
  <input type="text" id="input2">
  <button id="submitBtn" disabled>Submit</button>

  <script>
    const input1 = document.getElementById('input1');
    const input2 = document.getElementById('input2');
    const submitBtn = document.getElementById('submitBtn');

    function checkInputs() {
      if (input1.value.trim() !== '' && input2.value.trim() !== '') {
        submitBtn.disabled = false;
      } else {
        submitBtn.disabled = true;
      }
    }

    input1.addEventListener('input', checkInputs);
    input2.addEventListener('input', checkInputs);
  </script>
</body>
</html>

В данном примере при вводе текста в оба инпута будет проверяться их заполненность. Кнопка "Submit" будет активирована только если оба инпута содержат хотя бы один символ (не учитывая пробелы из-за .trim()).

Это базовая реализация. В зависимости от конкретных требований или фреймворка, такой подход может быть изменён или дополнен.