选中时设置默认值复选框Jquery

Question

我有start_time，end_time，total_hours，并且可以在我的表单中找到。 start_time和end_time类型为disabled，仅在我选中可用复选框时启用。 total_hours类型是只读的，因为它只是计算从开始到结束的小时数。

当我选中可用复选框时，如何将默认值设置为start_time和end_time？

例如：当我在周日检查时，start_time自动检查8 AM到end_time下午3点。

到目前为止，这是我的Jquery代码：

var totalHours, timeDiff, end_time, start_time;

var bootstrapValidator = $('#driverForm').data('bootstrapValidator');

$('div.parttime').each(function(index, value) {
    var startTimeEle = $('input[name="parttimeAvailabilities['+index+'][start_time]"]');
    var endTimeEle = $('input[name="parttimeAvailabilities['+index+'][end_time]"]');
    var hoursEle = $('input[name="parttimeAvailabilities['+index+'][hours]"]');

    $('#driverForm').bootstrapValidator('addField', startTimeEle.attr('name'), {
        validators: {
            notEmpty: {
                message: 'The start time is required and cannot be empty'
            },
            regexp: {
                regexp: /^[0-9:]+$/,
                message: 'The start time can only consist of number'
            },
            different: {
                field: endTimeEle.attr('name'),
                message: 'The start time and end time cannot be the same as each other'
            }
        }
    });
    $('#driverForm').bootstrapValidator('addField', endTimeEle.attr('name'), {
        validators: {
            notEmpty: {
                message: 'The end time is required and cannot be empty'
            },
            regexp: {
                regexp: /^[0-9:]+$/,
                message: 'The end time can only consist of number'
            },
            different: {
                field: startTimeEle.attr('name'),
                message: 'The end time and start time cannot be the same as each other'
            }
        }
    });

    $('.start_time').datetimepicker({
        format: 'HH:mm:00', 
        useCurrent: false,
    });

    $('.end_time').datetimepicker({
        format: 'HH:mm:00', 
        useCurrent: false,
    });

    $(startTimeEle).on("dp.change", function (e) {
        calculateHours();
        $('#driverForm').bootstrapValidator('revalidateField', startTimeEle.attr('name'));
    });

    $(endTimeEle).on("dp.change", function (e) {
        calculateHours();
        $('#driverForm').bootstrapValidator('revalidateField', endTimeEle.attr('name'));
    });

    function calculateHours() {
        var endTime = moment($(endTimeEle).val(),"HH:mm:00");
        var startTime = moment($(startTimeEle).val(),"HH:mm:00");
        console.log(startTime,endTime);

        if (startTime > endTime) {
            endTime = moment($(endTimeEle).val(),"HH:mm:00").add(1,'days'); 
        }

        timeDiff = endTime.diff(startTime);
        totalHours = moment.duration(timeDiff).hours();

        if (isNaN(timeDiff)) { timeDiff = null;}
        $(hoursEle).val(totalHours);
        console.log(totalHours);
    }
});

到目前为止，这是我的视图表单代码：

<?php $index = 0; ?>
@foreach($dayOfWeek as $key => $day )
<div class="parttime">
    <div class="row">
        <div class="col-xs-2">
            <div class="form-group">
                {!! Form::text('parttimeAvailabilities['.$index.'][day]',$day, ['class' => 'form-control','disabled'])!!}
                {!! Form::hidden('parttimeAvailabilities['.$index.'][day]',$key, ['class' => 'form-control'])!!}
                {!! Form::hidden('parttimeAvailabilities['.$index.'][id]',null) !!}
            </div>
        </div>
        <div class="col-xs-2">
            <div class="form-group">
                {!! Form::text('parttimeAvailabilities['.$index.'][start_time]', null, ['class' => 'form-control start_time','placeholder' => 'Start time'])!!}
            </div>
        </div>
        <div class="col-xs-2">
            <div class="form-group">
                {!! Form::text('parttimeAvailabilities['.$index.'][end_time]', null, ['class' => 'form-control end_time','placeholder' => 'End time'])!!}
            </div>
        </div>
        <div class="col-xs-2">
            <div class="form-group">
        {!! Form::text('parttimeAvailabilities['.$index.'][hours]', null, ['id' => 'hours','class' => 'form-control', 'readonly'])!!}
            </div>
        </div>
        <div class="col-xs-2 text-center">
            <div class="form-group">
                {!! Form::checkbox('parttimeAvailabilities['.$index.'][available]')!!}
            </div>
        </div>
    </div>
</div>
<?php $index++; ?>
@endforeach