Если несколько инпутов не заполнены

226
10 февраля 2018, 23:24

Доброго времени суток :)

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

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

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="..."/>');
});
Answer 1

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

$(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>

READ ALSO
Сообщение через сайт на WhatsApp

Сообщение через сайт на WhatsApp

Нужна такая фича как отправить себе на WhatsAppДопустим человек просматривает страницу товара на моем сайте и ему понравилась какая-то вещь,...

205
Как работает атрибут nonce?

Как работает атрибут nonce?

Как работает атрибут nonce (для html-элемента link)? И непонятно для чего он вообще нужен?

207
Как добавить атрибут с помощью jquery?

Как добавить атрибут с помощью jquery?

Метод attr добавляет значение в html кодДопустим, я хочу добавить всем элементам страницы font-size, он добавит это, но не в теге style, поэтому атрибут...

267
Google Ranking Вебсайта [требует правки]

Google Ranking Вебсайта [требует правки]

У меня есть сайт простой статический рекламного характераЯ в search engine google добавил и www версию и просто домен

184