jquery - 当在 jquery 中未选中复选框时,我试图从输入字段中删除 required
问题描述
required
当复选框未选中但它不起作用时,我试图从输入字段中删除该属性,并且当复选框被选中时,应该需要字段,请帮助我,谢谢。
html视图
<div class="col-md-2">
<input type="checkbox" id="scheduledis" name="checkbox[0]" class="schedule_discount" value="" >
<label for=""> Schedule Discount
</label>
</div>
<div class="input-group">
<input type="text" class="form-control datepicker-autoclose-1 dislay-required" required placeholder="Start Date" value="" name="start_date" >
<div class="input-group-append">
<span class="input-group-text">
<i class="md md-event-note">
</i>
</span>
</div>
<span class="text-danger">{{$errors->first('date') ?? null}}
</span>
</div>
jQuery脚本
$('input[type="checkbox"]').change(function() {
//check if check if checked
$(this).is(':checked') ?
$('input[name=start_date]').prop('required', false) :
$('input[name=start_date]').prop('required', true);
$('input[name=end_date]').prop('required', false) :
$('input[name=end_date]').prop('required', true);
$('input[name=start_time]').prop('required', false) :
$('input[name=start_time]').prop('required', true);
$('input[name=end_time]').prop('required', false) :
$('input[name=end_time]').prop('required', true);
});
解决方案
您可以简单地检查复选框是否被checked
使用,prop('required', false)
或者prop('required', true)
从输入框中删除或添加所需的属性。
演示代码:
$('input[type="checkbox"]').change(function() {
//check if check if checked
$(this).is(':checked') ?
$('input.dislay-required').prop('required', false) :
$('input.dislay-required').prop('required', true);
});
:required {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="checkbox" id="scheduledis" name="checkbox[0]" class="schedule_discount" value="">
<label for=""> Schedule Discount
</label>
</div>
<div class="input-group">
<input type="text" class="form-control datepicker-autoclose-1 dislay-required" required placeholder="Start Date" value="" name="start_date">
<input type="text" class="form-control datepicker-autoclose-1 dislay-required" required placeholder="End Date" value="" name="end_date">
<div class="input-group-append">
<span class="input-group-text">
<i class="md md-event-note">
</i>
</span>
</div>
</div>