根据另一个输入的结果验证一个输入

Question

我正在构建一个需要验证的注册表单。有三个输入字段(默认情况下不是必需的)和一个复选框(值为yes和no)。我希望复选框是必需的，如果它被选中，这三个输入字段将是必需的，否则它们将不需要。

现在我可以将它设置为当复选框值为yes时必需的，但是当我为复选框选择valueno时，三个输入字段仍然是必需的。

var switchStatus = false;
if ($("#hidInd").val() == "") {
$("#ind").prop("required", true);
$("#first").prop("required", true);
$("#second").prop("required", true);
$("#third").prop("required", true);
}
$("#ind").on('change', function() {
if ($(this).is(':checked')) {
switchStatus = $(this).is(':checked');
$("#hidInd").val("Y");
$("#ind").prop("required", true);
$("#first").prop("required", true);
$("#second").prop("required", true);
$("#third").prop("required", true);
} else {
switchStatus = $(this).is(':checked');
$("#hidInd").val("N");
$("#ind").prop("required", false);
$("#first").val("");
$("#second").val("");
$("#third").val("");
$("#first").prop("required", false);
$("#second").prop("required", false);
$("#third").prop("required", false);
}
});

<!-- jQuery 3.3.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Body -->
<form class="needs-validation" novalidate>
<div class="col-md-12 mb-3">
<label for="DataOfficerInd" class="form-label">Please choose yes or no <i class="fa-solid fa-star-of-life required-field fa-xs"></i></label>
<div>
<input type="hidden" id="hidInd" name="hidInd" value="" />
<div class="d-inline-block mt-1 me-1">No</div>
<div class="form-check form-switch d-inline-block form-switch-md">
<input type="checkbox" class="form-check-input" id="DataOfficer_ind" style="cursor: pointer;">
<label for="ind" class="form-check-label mt-1 ms-1">Yes</label>
</div>
</div>
<div class="valid-feedback">Correct!</div>
<div class="invalid-feedback">
Please checked the swithch
</div>
</div>
<h6>Please enter 3 username:</h6>
<div class="col-md-12 mb-3">
<label for="first" class="form-label">First Choice </label>
<input type="text" class="form-control" id="first">
<div class="valid-feedback">Correct!</div>
<div class="invalid-feedback">Please fill in the first choice.</div>
<label for="second" class="form-label">Second Choice </label>
<input type="text" class="form-control" id="second">
<div class="valid-feedback">Correct!</div>
<div class="invalid-feedback">Please fill in the second choice.</div>
<label for="third" class="form-label">Third Choice </label>
<input type="text" class="form-control" id="third">
<div class="valid-feedback">Correct!</div>
<div class="invalid-feedback">Please fill in the last choice.</div>
</div>
</form>

Answer 1

你需要改变复选框的选择器:

var switchStatus = false;
if ($("#hidInd").val() == "") {
$("#ind").prop("required", true);
$("#first").prop("required", true);
$("#second").prop("required", true);
$("#third").prop("required", true);
}
$("#DataOfficer_ind").on('change', function() {
if ($(this).is(':checked')) {
switchStatus = $(this).is(':checked');
$("#hidInd").val("Y");
$("#ind").prop("required", true);
$("#first").prop("required", true);
$("#second").prop("required", true);
$("#third").prop("required", true);
} else {
switchStatus = $(this).is(':checked');
$("#hidInd").val("N");
$("#ind").prop("required", false);
$("#first").val("");
$("#second").val("");
$("#third").val("");
$("#first").prop("required", false);
$("#second").prop("required", false);
$("#third").prop("required", false);
}
});