Datepicker enable after select symbol

Question

I have a 2 fields, symbol and date, if symbol is select after datepicker is enable, without select symbol datepicker is disable.

<script src="{{asset('js/libs/jquery.js')}}" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link href="{{asset('css/bootstrap-datetimepicker.min.css')}}" rel="stylesheet" media="screen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>




<div class="form-group col-sm-10">
                {!! Form::label('symbol', 'Symbals:') !!}
                {!! Form::select('symbol_id', [''=>'Choose market']  , null, ['class'=>'form-control', 'id'=>'symbol'])!!}
            </div>
<div class="form-group col-lg-5">
                {!! Form::label('tradedate', 'Traded date:') !!}
                <div class=" input-append date form_datetime" data-date="{{date('Y-m-d H:i:s')}}" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input size="16" type="text" value="" readonly class="form-control">
                    <span class="add-on"><i class="icon-remove"></i></span>
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>
                <input type="hidden" id="dtp_input1" value="" name="tradedate" />
            </div>

This script is use datepicker, i use in form of date, time and select month, datepicker javascript available below: This javascript use timepicker,

<script type="text/javascript">
    $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });
    $('.form_date').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    $('.form_time').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0
    });
</script>

Answer 1

// use jquery
// event is fired when select change
$('#symbol').on('change', function() {
    // this.value - to retrieve the value of selected option

    // do whatever you want. Give 'id' to your datepicker and you can use 'addClass' to disable datepicker depends on plugin you use

    // for example
    if (this.value == 0) {
        $('#datepicker').attr('disabled',true);
    } else {
        $('#datepicker').attr('disabled',false);
    }
});

UPDATE

Here I created jsfiddle for you. Look at it. I think you want something like that. jsfiddle