在这里我想禁用一个按钮,直到所有必填字段都填满为止。在禁用条件下,按钮颜色应为灰色。如果所有字段都已完全填充,则按钮应启用不同的颜色。再一次,如果我们点击上一个按钮,那么条件应该再次呈现并且按钮应该启用,但在我的情况下,如果我点击上一个按钮,那么它将进入禁用状态。那么如何实现这一点。
<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>
答案 0 :(得分:0)
您可以使用“每个函数”创建一个包含表单中每个输入的数组
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/every
虽然不是每个输入都返回 true,但它会返回 false,因此您可以禁用按钮