Nov 3, 2016
0
Level 1
jQuery enable form if checked checkboxes into array
So basiclly i have a form which contains day, start_time, end_time, total_hours, and available checkbox. I am trying to enable form if checkboxes that are currently checked and store them into an array. ex : when I checked available on Sunday or Friday. the form will become enable to fill the start and end time.
here's my form code so far :
@extends('layout.master')
@section('content')
{!! Form::model($obj, [
'url' => $route,
'method' => $method,
'id' => 'driverForm',
]) !!}
<?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', 'disabled'])!!}
</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', 'disabled'])!!}
</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
and here's my jQuery code so far :
$('div.parttime').each(function(index) {
var checkbox = $('input[name="parttimeAvailabilities['+index+'][available]"]');
var startbox = $('select[name="parttimeAvailabilities['+index+'][start_time]"]');
var endbox = $('select[name="parttimeAvailabilities['+index+'][end_time]"]');
$(startbox).prop("enable", $(checkbox).prop('checked'));
$(endbox).prop("enable", $(checkbox).prop('checked'));
$('#driverForm').bootstrapValidator('addField', startbox, {
validators: {
notEmpty: {
message: 'The start time is required and cannot be empty'
},
}
});
$('#driverForm').bootstrapValidator('addField', endbox, {
validators: {
notEmpty: {
message: 'The end time is required and cannot be empty'
},
}
});
$(checkbox).on('click', function(e) {
$(selectbox).select2('val', '');
var bootstrapValidator = $('#driverForm').data('bootstrapValidator');
bootstrapValidator.enableFieldValidators(startbox, !$(checkbox).prop('checked'));
bootstrapValidator.enableFieldValidators(endbox, !$(checkbox).prop('checked'));
$(startbox).prop("enable", $(checkbox).prop('checked'));
$(endbox).prop("enable", $(checkbox).prop('checked'));
});
});
it throws this error :
bootstrapValidator.js:1521 Uncaught TypeError: Cannot read property 'validators' of undefined
any idea ??
Please or to participate in this conversation.