Question

下面，我一直试图根据eoddesc的值是required还是completetasks，将Yes字段设为No。我制作了一个快速脚本，单击提交按钮即可执行。到目前为止，它可以从required输入中删除eoddesc属性，但是如果将值更改回Yes，则它将保持不具有required属性。 / p>

<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字段更新？当我进行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");
        }
   })
});

问题在于，“必需”在提交之前被评估。因此，当您按下Submit时，它会看到该字段为“ not required”，然后添加了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，因此要使用.prop添加“必需”。但是要删除，您仍然可以使用removeAttr。我希望这可以解决您的问题。

已修复，巴拉特·格莱达（Bharat Geleda）的评论是真正的正确答案。

根据其他输入来形成输入属性

1 个答案: