如何禁用按钮直到所有必填字段都已填写

Question

在这里，我想禁用一个按钮，直到填写所有必填字段。 在禁用条件下，按钮颜色应为灰色。 如果所有字段都已完全填充，则按钮应启用不同的颜色。 如果我们再次单击上一个按钮，那么条件应该会呈现并且按钮应该启用，但在我的情况下，如果我单击上一个按钮，那么它将进入禁用状态。 那么如何实现这一点。

<form>
<div step == 1>
  <input id='first' type='text' v-model='first' />
  <input id='second' type='text' v-model='second' />
  <input id='third' type='text' v-model='third' />
  <button id="button123">Next</button>
</div>

<div step == 2>
  <input id='first1' type='text' v-model='first' />
  <input id='second2' type='text' v-model='second' />
  <input id='third3' type='text' v-model='third' />
  <button>previous</button>
  <button>Next</button>
</div>
</form>

<script>
function checkForm(){
    var name = document.getElementById("first").value;
    var cansubmit = (name.length > 0);
    document.getElementById("button123").disabled = !cansubmit;
    document.getElementById("button123").style.color = "red";
    };
</script>

Answer 1

您可以使用“每个函数”创建一个数组，其中包含表单的每个输入

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/every

虽然不是每个输入都返回 true，但它会返回 false，因此您可以禁用该按钮