下面我一直在尝试获取 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
.
最佳答案
您只需更改 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 的评论才是真正的正确答案。
关于javascript - 基于其他输入的表单输入属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54830945/