javascript - 如何防止用户在填写之前的回复之前选择下一个可折叠项目？

问题描述

我正在尝试在 Flask 中编写一个基本表单，现在它只是一个页面。用户首先输入他们的名字，然后他们可以回答他们的性别，最后回答他们使用的交通工具。但是我需要他们能够按顺序执行此操作，因此在输入或选择前两个响应之前，他们无法回答他们的运输方式。这是一个学习练习，所以我也想把它放在一个页面上。

以下 html/css/javascript 代码显示了我目前拥有的基本知识。所有三个主题问题都在一个可折叠的字段中。所以我希望用户在前一个字段有响应之前无法单击以下可折叠字段。我在想这必须用 javascript 完成，但我不确定如何做到这一点。

var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
        content.style.display = "none";
        } else {
        content.style.display = "block";
        }
    });
    }

.collapsible {
    background-color: rgb(200, 211, 214);
    color: black;
    font-weight:bold;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    }

    .active, .collapsible:hover {
    background-color: brown;
    }

    .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: beige;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body style="background-color:rgb(172, 212, 245);overflow-x:hidden">

    <button type="button" class="collapsible">Name</button>
    <div class="content">
        <p> Must fill out before heading to next section </p>
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname" value="John"><br>
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="lname" value="Doe">
    </div>
    <br>
    <button type="button" class="collapsible">Gender</button>
    <div class="content">
        <p> Must fill out before heading to next section </p>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label><br>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label><br>
            <input type="radio" id="other" name="gender" value="other">
            <label for="other">Other</label>
    </div>
    <br>
    <button type="button" class="collapsible">Transportation</button>
    <div class="content">
            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
            <label for="vehicle1"> I have a bike</label><br>
            <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
            <label for="vehicle2"> I have a car</label><br>
            <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
            <label for="vehicle3"> I have a boat</label>
    </div>

</body>
</html>

标签： javascripthtmlcssflask

javascript - 如何防止用户在填写之前的回复之前选择下一个可折叠项目？

问题描述

解决方案

推荐阅读