Javascript 对于每个循环，使下一个输入字段为必填字段

我做了一个函数，它应该检查我的输入字段，以及类型复选框是否被选中。。。但是，每当我检查输入字段时，我希望设置为必需的输入字段都不会获得必需的属性

我基本上试过了这个话题的所有内容：

阅读本主题，希望能找到一些东西：

但不幸的是，没有一个话题对我有更大的帮助。因此，要么我在代码中的某个地方犯了错误，要么所需的属性有点错误

我通过输入字段（onclick事件）调用函数。 我已经检查了选择器是否正确，它们是正确的

这是我的HTML的外观：

<div class="row" style="margin: auto;">
   <div class="custom-control custom-checkbox col-md-4">
       <input class="custom-control-input" onclick="is_required()" type="checkbox" id="fruittariër" value="fruittariër" name="vegetarisch[]">
        <label class="custom-control-label" for="fruittariër">&nbsp;fruittariër</label>
   </div>
<div class="col-md-4 input-group leftVeganPadding">
 <div class="input-group-prepend">
   <span class="input-group-text" id="basic-addon1">€</span>
      </div>
<input type="number" step="0.01" class="form-control" placeholder="Kosten" name="vegCosts[]">
 </div>
 <div class="input-group col-md-4 leftVeganPadding">
  <div class="input-group-prepend">
<span class="input-group-text" id="veganDatePicker"><i class="fas fa-calendar-alt"></i></span>
  </div>
<input type="text" class="form-control" name="veganEindDatum[]" id="shutDateFruittariër" placeholder="Sluit Datum" aria-label="veganDatePicker" aria-describedby="veganDatePicker">
     </div>
</div>

---

因此，我希望实现的是：选中复选框后，我希望在行中包含其他两个输入字段，以获得属性“required”。

您可以尝试使用onchange事件：

<input class="custom-control-input" id="myCheckbox" type="checkbox"  value="vegan" name="vegetarisch[]">

---

无需使用

每一个
，您几乎可以使用事件处理程序在一行中完成这项工作

在下面，可以找到与单击的按钮最近的
.row
。然后使用一个选择器查找所需的两个输入。然后根据检查按钮的状态设置所需的


$（文档）.ready（函数（）{
//处理复选框上的事件
$（'input[name=“vegetarisch[]”）。在（'click'，function（）上{
//坐最近一排
$（此）。最近（“.row”）
//找到复选框
.find（'input[name=“vegCosts[]”，input[name=“veganinddatum[]”）
//如果选中该复选框，则设置所需的属性
.prop（'required'，$（this）.is（“：checked”）；
});
});
：必需{
边框颜色：红色；
}

果芋
€
请添加所有相关代码（其他HTML字段和任何CSS），以便我们可以复制您的问题。您的代码似乎工作正常：，但这是基于您使用的JS方法对HTML进行假设。请将HTML添加到问题中，并检查控制台中是否有任何错误。还要注意的是，您应该在HTMLH中的*
属性上使用不引人注目的事件处理程序而不是
。变量
odin
应该在
中声明。each（）
回调在
if
之外。现在，有两个
odin
变量：一个在
if
块中，另一个是全局变量。因为我已经键入了它，下面是我的小提琴，它有两行和优化的代码：
function is_required() {
    //check whether the checkbox has been checked or not
    //if yes, make the other input fields inside the row required
        // variable odin = the row wrapped around the cols
    $('input[name="vegetarisch[]"]').each(function(index, thisElement) {
        if($(thisElement).is(':checked')) {
            let odin = $(thisElement).closest('.row');
            odin.find('input[name="vegCosts[]"]').attr('required', true);
            odin.find('input[name="veganEindDatum[]"]').attr('required', true);
        } else {
            odin = $(thisElement).closest('.row');
            odin.find('input[name="vegCosts[]"]').attr('required', false);
            odin.find('input[name="veganEindDatum[]"]').attr('required', false);
        }
    });
}

<input class="custom-control-input" id="myCheckbox" type="checkbox"  value="vegan" name="vegetarisch[]">

$('#myCheckbox').change(function () {
    is_required();
});

function is_required() {
    let odin = $(thisElement).closest('.row');
    $('input[name="vegetarisch[]"]').each(function (index, thisElement) {
        if ($(thisElement).is(':checked')) {
            odin.find('input[name="vegCosts[]"]').attr('required', true);
            odin.find('input[name="veganEindDatum[]"]').attr('required', true);
        } else {
            odin.find('input[name="vegCosts[]"]').attr('required', false);
            odin.find('input[name="veganEindDatum[]"]').attr('required', false);
        }
    });
}