foreach 循环，使下一个输入字段成为必需

Question

我创建了一个函数，它应该检查我的输入字段，类型复选框是否已被选中...但是每当我检查我的输入字段时，我希望设置为必需的输入字段没有获得所需的属性。

我基本上尝试了这个主题的所有内容：jQuery add required to input fields

并阅读此主题以希望找到一些东西：.prop() vs .attr()

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

我通过我的输入字段（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>

这就是我调用函数的方式：

<input class="custom-control-input" onclick="is_required()" type="checkbox"  value="vegan" name="vegetarisch[]">

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);
        }
    });
}

所以我希望实现的目标是：选中复选框后，我希望在该行内有另外 2 个输入字段以获得“必需”属性。

Answer 1

您可能想尝试使用 onchange 事件：

<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);
        }
    });
}

Answer 2

不需要each，您几乎可以使用事件处理程序在一行中完成此操作。

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

$(document).ready(function() {
  //Handle events on the checkbox
  $('input[name="vegetarisch[]"]').on('click', function() {
    //get the nearst row
    $(this).closest('.row')
      //Find the check boxes
      .find('input[name="vegCosts[]"],input[name="veganEindDatum[]"]')
      //set the required propery if the checkbox is checked
      .prop('required', $(this).is(":checked"));
  });

});

:required {
  border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="row" style="margin: auto;">
  <div class="custom-control custom-checkbox col-md-4">
    <input class="custom-control-input" 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>