0

Есть блок, в нём с самого начала два инпута.

Есть кнопка, которая добавляет в блок ещё инпут, т.е. инпутов может быть несколько.

И есть ещё одна кнопка.

Вопрос, как сделать так, чтобы вторая кнопка было "заблокирована" до тех пор, пока хотя бы в двух инпутах не будет какого-либо значения.


HTML:

<div class="list opa-inputs">
   <input type="text" placeholder=".."/>
   <input type="text" placeholder=".."/>
</div>

<input type="button" id="add" value="Добавить"/>
<input type="button" id="creat" value="Вторая кнопка" disabled="disabled"/>

JQ:

$('#add').on('click', function(){
   $('.list').append('<input type="text" placeholder="..."/>');
});
5
  • 1
    а сами пробовали что то в виде кода написать ?
    – Arsen
    9 фев 2018 в 10:39
  • А что именно не получается? Выложи сюда код...
    – Air
    9 фев 2018 в 10:39
  • Добавил код, вот.
    – De.Minov
    9 фев 2018 в 10:45
  • у вас два варианта - либо обрабатывать событие change инпутов где проверять заполненность полей и блокировать кнопку. Либо при нажатии кнопки проходить по инпутам и если не заполнено, то делать выход. Так что в зависимости от необходимой логики реализуйте один из них.
    – teran
    9 фев 2018 в 10:48
  • Это-то понятно.. Я вот чёт догнать не могу, как реализовать :D
    – De.Minov
    9 фев 2018 в 10:51

1 ответ 1

3

Предполагаю что вы это имели ввиду

$(document).ready(function() {
  var createButton = $("#create-input");
  createButton.click(function() { // по клику создаем в DOM новый инпут с типом text
    $('#wrapper').append('<input type="text" onchange="inpValue()" />');
  })
  inpValue(); // при иницилизации скрипта вызываем функцию
});


function inpValue() {
  var inputs = $("input[type=text]"); // Находим все инпуты с типом text
  var disbleButton = $("#some-btn"); // Находим кнопку которую нужно скрыть
  var data = []; // Пустой массив :))) 
  $.each(inputs, function(index) { // Проходим по всем инпутам которые есть в DOM
    if ($(inputs[index]).val().length >= 1) { // Делаем проверку, если value инпута больше одного пропускаем через проверку
      data.push($(inputs[index]).val()); // Записываем в дату value нашего инпута
    }
  });
  if (data.length >= 2) { // Проверяем, есть в нашей data больше чем 2 заполненных инупта ставим кнопке false или true если меньше
    disbleButton.prop('disabled', false);
  } else {
    disbleButton.prop('disabled', true);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  <input type="text" value="1" onchange="inpValue()" />
  <input type="text" onchange="inpValue()" />
  <input type="text" onchange="inpValue()" />
</div>
<button id="create-input">Создать поле для ввода</button>
<input id="some-btn" type="button" value="Кнопка" disabled>

2
  • Объясните код человеку на будущие. 9 фев 2018 в 11:12
  • Огромное спасибо
    – De.Minov
    9 фев 2018 в 11:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.