如何根据选中计量单位动态移除数量输入框的required属性

核心思路是通过DOM关系定位同一行的数量输入框，根据计量单位的选择动态修改它的required属性。以下是具体实现步骤：

1. 优化PHP代码，给每行添加容器 #

先给循环生成的每行表单元素套一个容器，方便后续通过DOM精准定位关联元素：

<form method="post">
    <?php
        for ($n = 0; $n < $num; $n++) {
            $data = $DB->query("SELECT * FROM ingredient"); ?>
            <!-- 新增行容器，用于定位同一行的元素 -->
            <div class="ingredient-row">
                <select name="list_ingr[]" required> 
                    <?php while ($ingrs = $data->fetch()) { ?>
                        <option value="<?php echo $ingrs['id_ingr'] ?>"><?php echo $ingrs['name'] ?></option>
                    <?php } ?>
                </select>

                Qt. <input type="number" name="list_quant[]" step="1" min="1" required> 

                <select name="measure[]">
                    <option value="none"></option>
                    <option value="gr">gr</option>
                    <option value="ml">ml</option>
                    <option value="j.e.">j.e.</option>
                </select><br>
            </div>
        <?php    
        }
    ?>
    <br>
    <input type="submit" name="confirm" value="Confirm">
</form>

2. 添加原生JavaScript代码 #

在页面的</body>标签前（或者表单代码之后）插入这段JS，它会监听计量单位选择框的变化，动态修改数量输入框的required属性：

// 获取所有计量单位选择框
const measureSelects = document.querySelectorAll('select[name="measure[]"]');

// 给每个选择框绑定变化事件
measureSelects.forEach(select => {
    select.addEventListener('change', function() {
        // 找到当前选择框所在的行容器
        const row = this.closest('.ingredient-row');
        // 定位到同一行的数量输入框
        const quantInput = row.querySelector('input[name="list_quant[]"]');
        
        if (this.value === 'j.e.') {
            // 移除必填属性
            quantInput.removeAttribute('required');
            // 可选：清空输入框（因为不需要填写了）
            quantInput.value = '';
        } else {
            // 恢复必填属性
            quantInput.setAttribute('required', 'required');
        }
    });
});

// 页面加载完成后初始化，处理默认选中的情况
document.addEventListener('DOMContentLoaded', function() {
    measureSelects.forEach(select => {
        select.dispatchEvent(new Event('change'));
    });
});

代码说明 #

• 用closest('.ingredient-row')精准定位当前选择框所在的行，确保只修改同一行的数量输入框
• 监听change事件，每次选项变动时实时更新属性
• 初始化代码会在页面加载完成后自动执行一次，处理页面加载时就默认选中j.e.的情况

内容的提问来源于stack exchange，提问作者marco.ma