根據選擇的選項添加或刪除輸入字段的必需屬性

Question

基本上我有一個表單，其中一定數量的輸入字段和選擇（成分、數量、度量單位）由循環生成。 現在我只想在關聯的選定計量單位為“je”時從數量字段中刪除所需的屬性

<form method="post">

    <?php
        for ($n = 0; $n < $num; $n++) {

            $data = $DB->query("SELECT * FROM ingredient"); ?>
            <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>

        <?php    
        }
    ?>
    <br>
    <input type="submit" name="confirm" value="Confirm">

</form>

我在客戶端編程方面幾乎沒有經驗，所以我不知道如何實現它； 我試着尋找一堆 JS/jQuery 代碼，但似乎都不起作用：/

任何幫助表示贊賞！

Answer 1

向表單添加更改事件偵聽器，以處理更改值已更改的 select 元素旁邊的 input 元素的 required 屬性。

document.querySelector('form').addEventListener('change', e => {
    if (e.target.matches('select')) {
        e.target.previousElementSibling.required = e.target.value !== 'j.e.';
    }
});

Answer 2

如果我理解正確，這是我的工作解決方案：

我為您的 Qt 輸入設置了id 。 我用 jQuery 刪除了一個。

<form method="post">
<?php
    for ($n = 0; $n < $num; $n++) {
        $data = $DB->query("SELECT * FROM ingredient"); ?>
        <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 id="qt_<?php echo $ingrs['id_ingr'] ?>" 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>
    <?php    
    }
?>
<br>
<input type="submit" name="confirm" value="Confirm">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#qt_2').remove(); //For example, to remove qt_2
});
</script>