Question

我创建了一个函数，该函数应该检查是否已选中类型为checkbox的输入字段...但是，每当我检查输入字段时，希望输入的输入字段都不会获得必需的属性。 / p>

我基本上尝试了以下所有主题：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个输入字段以获取属性'required'。

Answer 1

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

在下面，找到了与所单击按钮最接近的required。然后使用一个选择器来查找所需的两个输入。然后根据检查按钮的状态设置$(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")); }); }); prop。

: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>

$ python pi_Chudnovsky.py 100 1000
3.1415926535896751768742638018492028796422794574832770797807531304291682072583579638804596101871423663813700249451933537852

Answer 2

您可能想尝试使用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);
        }
    });
}

foreach循环，将下一个输入字段设为必填项

2 个答案: