Javascript禁用按钮，直到所有字段都填满

Question

将不胜感激一些帮助解决这个问题。 需要使事件侦听器适用于所有元素。 所以基本上当你填写姓名，姓氏，即所有字段时，只有按钮应该被启用，即使其中一个字段是空的，按钮也应该被禁用。

 (function () {
 "use strict";

 var knapp = document.getElementById('skicka');

 knapp.disabled = true;

 var f=document.getElementById('fornamn');
 var e=document.getElementById('efternamn');
 var p=document.getElementById('passnr');
 var n=document.getElementById('nat');

 e.addEventListener('change',function(){

  if(e.value==='' ){

 knapp.disabled=true;
   }

 else{
  knapp.disabled=false;
 }
  });

  })();

Answer 1

 let d = document, [inputs, knapp] = [ d.querySelectorAll('[type="text"]'), d.querySelector('#skicka')] knapp.disabled = true for (i = 0; i < inputs.length; i++) { inputs[i].addEventListener('input',() => { let values = [] inputs.forEach(v => values.push(v.value)) knapp.disabled = values.includes('') }) }

 <form> <input id=fornamn type=text><br> <input id=efternamn type=text><br> <input id=passnr type=text><br> <input id=nat type=text><br> <input type=button id=skicka value=Complete> </form>

这将做到。 我更喜欢input上的 eventhandler not change ，以便您可以在键入时看到按钮被启用。 每次在任何字段中输入任何内容时，它都会立即获取所有值并将它们添加到数组中。 ES6 中新增的.includes()是一种检查数组特定值并返回布尔值的方法。

Answer 2

var elements = document.querySelectorAll("#fornamn, #efternamn, #passnr, #nat");
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("change", function() {
    if(document.getElementById("fornamn").value == "" && document.getElementById("passnr").value == "" && document.getElementById("nat").value = "" && document.getElementById("efternamn").value == "") {
        knapp.disabled=true;
    } else {
        knapp.disabled=false;
    }
  });
}