我创建了一个函数,该函数应该检查是否已选中类型为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"> 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'。
答案 0 :(得分: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"> 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
答案 1 :(得分:0)
您可能想尝试使用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);
}
});
}