当在 jquery 中未选中复选框时，我试图从输入字段中删除 required

Question

我正在尝试从输入字段中删除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);

});

Answer 1

您可以简单地检查复选框是否为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>