javascript - 如果尚未选择上一个下拉菜单，我试图阻止某人填写文本输入

Question

我的任务是制作一个表格，其中包含标题下拉菜单、名字、姓氏和电子邮件的文本输入，然后将其作为复选框。我已经成功地制作了表格，并且当表格上的某些内容不正确时，我已经放置了消息但是现在我需要阻止 somone 如果他们没有选择标题或者如果标题 === - 则无法输入名字

然后我需要对姓氏做同样的事情，但用名字而不是头衔，如果我知道如何做第一个，我应该能够解决这个问题，因为唯一的变化是输入类型。

如果有人能帮忙那就太好了:)

标签： javascripthtmlformsvalidation

Answer 1

很简单的例子。

默认情况下，这些字段设置为“禁用”。该脚本检查列表中的前一个字段，如果它有内容，则从下一个字段中删除“已禁用”

var list = document.getElementsByClassName('inpt');

for (let i = 0; i < list.length; i++) {
    list[i].addEventListener("change", function () {
        if (this.value.length > 0) {
            checkInputs(this);
        }
    });
}

function checkInputs(x) {
    for (let i = 0; i < list.length-1; i++) {
        if (list[i].id === x.id) {
            var z = document.getElementById(list[i + 1].id)
            z.removeAttribute('disabled');
            z.focus();
        }
    }
}

<select class="inpt" id="first">
    <option value="">Select...</option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>

<input class="inpt" id="name" type="text" disabled>
<input class="inpt" id="surname" type="text" disabled>
<input class="inpt" id="age" type="text" disabled>