javascript - 基于其他输入的表单输入属性

Question

下面我一直在尝试获取 eoddesc字段为required取决于是否completetasks值为 Yes或No 。我制作了一个快速脚本，单击提交按钮即可执行该脚本。截至目前，它可以删除 required属性来自eoddesc输入，但如果将值改回Yes ，那么它就保持没有 required属性。

<form action="/addeod" method="POST" id="addEODForm">
    <div class="modal-body">
            <div class="row">
                <div class="col-8 mt-4">
                    <label for="completetasks">Did I complete all my tasks that were due today and/or overdue?</label>
                </div>
                <div class="col-4 mb-3">
                    <select class="browser-default custom-select" id="completetasks" name="success" style="margin-top: 30px;" required>
                        <option value="" selected>Yes/No:</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-12 mb-2">
                    <div class="md-form">
                        <textarea id="eoddesc" class="form-control md-textarea" name="ifno" length="120" rows="3" required></textarea>
                        <label for="eoddesc">If not, please explain why:</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="md-form">
                        <textarea id="eodsum" class="form-control md-textarea" name="summary" length="120" rows="3" required></textarea>
                        <label for="eodsum">Briefly summarize all you've completed today:</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer d-block">
            <div class="row w-100">
                <div class="col-sm-6 col-12 "><a type="button" class="btn btn-outline-info waves-effect w-100" data-dismiss="modal">Close</a></div>
                <div id="eodSumButton" class="col-sm-6 col-12"><button type="submit" class="btn btn-info waves-effect waves-light w-100">Submit</button></div>
            </div>
        </div>
    </form>

<script>
$(document).ready(function(){
    $("#eodSumButton").click(function () {
        if ($("#completetasks").val() == "Yes"){
            console.log("NOT required");
            $("#eoddesc").removeAttr("required");
        }
        if ($("#completetasks").val() == "No"){
            console.log("required");
            $("#eoddesc").attr("required");
        }
    })
});
</script>

为什么表单不更新为 required field ？当我console.log它时，一切都按预期输出，但它不想更新attr .

Answer 1

您只需更改 completetasks 输入的事件监听器，而不是 eodSumButton。否则，代码仅在您尝试提交时检查:

$(document).ready(function(){
    $("#completetasks").on('change',function () {
        if ($("#completetasks").val() == "Yes"){
            console.log("NOT required");
            $("#eoddesc").removeAttr("required");
        }
        if ($("#completetasks").val() == "No"){
            console.log("required");
            $("#eoddesc").attr("required");
        }
   })
});

问题在于“必需”是在提交之前评估的。因此，当您按“提交”时，它会将该字段视为“非必需”，然后添加必需的属性。

编辑:我想我找到了你的问题:

$(document).ready(function(){
    $("#completetasks").click(function () {
        if ($("#completetasks").val() == "Yes"){
            $("#output").html("NOT required");
            $("#eoddesc").removeAttr("required");
        }
        if ($("#completetasks").val() == "No"){
             $("#output").html("required");
            $("#eoddesc").prop("required",true);
        }
    })
});

当使用 required 和 checked 等“属性”时，Jquery 将它们视为 property，因此要添加“required”使用 .prop。但要删除，您仍然使用 removeAttr。我希望这能解决您的问题。

已修复，Bharat Gelda 的评论才是真正的正确答案。