如何实现Accordion步骤2、3需填完步骤1字段才可访问？

要实现步骤2、3默认锁定，完成上一步才可访问的效果，我们可以通过HTML标记+CSS样式+简单JavaScript逻辑来实现，下面是具体步骤：

1. 调整HTML与CSS #

先修改你的代码，添加锁定状态的样式，并给步骤2、3标记锁定类：

<style>
output {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.125s;
    overflow: hidden;
}

div {
    min-height: 0;
}

.ocultar_check{
    display: none;
}

[type="radio"]:checked+output {
    grid-template-rows: 1fr;
}

fieldset {
    border: 0;
    display: grid;
    gap: 0.2rem;
    max-width: 100%;
    margin-inline: auto;
    padding: 1rem;
}

.pasos {
    padding: 0.5rem;
    color: #1E1E1E;
    font-weight: 600;
    background: #dddddd;
    cursor: pointer;
    transition: background 0.125s;
    border-radius: 0.2rem;

    &:hover {
        background: oklch(0.8 0 0.1);
    }
}

/* 新增锁定状态样式：灰化+禁止点击 */
.pasos.locked {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    pointer-events: none;
}

.ocultar_check.locked {
    pointer-events: none;
}
</style>

<fieldset id="accordion">
    <label for="1" class="pasos">Step1</label>
    <input class="ocultar_check" type="radio" name="toggle" id="1" value="1" checked>
    <output>
        <div>                  
            <input placeholder="name" class="field__input" id="name" name="name" required/>                                   
            <input placeholder="last name" class="field__input" id="lastName" name="lastName" required/>
        </div>
    </output>

    <!-- 步骤2默认添加locked类 -->
    <label for="2" class="pasos locked">Step2</label>
    <input class="ocultar_check locked" type="radio" name="toggle" id="2" value="2">
    <output>
        <div>
            <input placeholder="phone" class="field__input" id="phone" name="phone" required/>         
        </div>
    </output>

    <!-- 步骤3默认添加locked类 -->
    <label for="3" class="pasos locked">Step 3</label>
    <input class="ocultar_check locked" type="radio" name="toggle" id="3" value="3">
    <output>
        <div>
            <input placeholder="address" class="field__input" id="address" name="address" required/>          
        </div>
    </output>
</fieldset>

2. 添加JavaScript逻辑 #

写一段简单的JS代码，监听输入框变化，判断是否完成当前步骤，完成后自动解锁下一个步骤：

// 获取各步骤的元素
const step1Inputs = document.querySelectorAll('#name, #lastName');
const step2Label = document.querySelector('label[for="2"]');
const step2Radio = document.getElementById('2');
const step2Input = document.getElementById('phone');
const step3Label = document.querySelector('label[for="3"]');
const step3Radio = document.getElementById('3');

// 检查步骤1是否填写完成
function isStep1Done() {
    return Array.from(step1Inputs).every(input => input.value.trim() !== '');
}

// 检查步骤2是否填写完成
function isStep2Done() {
    return step2Input.value.trim() !== '';
}

// 监听步骤1输入框变化
step1Inputs.forEach(input => {
    input.addEventListener('input', () => {
        if (isStep1Done()) {
            // 解锁步骤2
            step2Label.classList.remove('locked');
            step2Radio.classList.remove('locked');
        } else {
            // 清空内容后重新锁定步骤2，且切回步骤1
            step2Label.classList.add('locked');
            step2Radio.classList.add('locked');
            if (step2Radio.checked) document.getElementById('1').checked = true;
        }
    });
});

// 监听步骤2输入框变化
step2Input.addEventListener('input', () => {
    if (isStep2Done()) {
        // 解锁步骤3
        step3Label.classList.remove('locked');
        step3Radio.classList.remove('locked');
    } else {
        // 清空内容后重新锁定步骤3，且切回步骤2
        step3Label.classList.add('locked');
        step3Radio.classList.add('locked');
        if (step3Radio.checked) step2Radio.checked = true;
    }
});

效果说明 #

• 初始状态：步骤2、3呈灰色，鼠标指针为禁止样式，无法点击切换
• 完成步骤1的姓名、姓氏填写后，步骤2自动解锁，可正常点击切换并填写内容
• 完成步骤2的电话填写后，步骤3自动解锁
• 若清空上一步的内容，后续步骤会重新锁定，并自动切回上一个已完成的步骤

内容的提问来源于stack exchange，提问作者streaming-coc