Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vanusi's avatar

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 ??

0 likes
0 replies

Please or to participate in this conversation.