Форма входных атрибутов на основе других входных данных

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?Когда я 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, поэтому для добавления «обязательных» используйте .prop.Но для удаления вы все равно используете removeAttr.Я надеюсь, что это решит вашу проблему.

Исправлено, комментарий Бхарата Геледы - верный правильный ответ.