Jquery change function is not working

Question

Initially I have disabled To date field,After selecting From date only I want to allow it to choose.I wrote code for that,But its not working.

 $(document).ready(function() { $('#levTo').attr('disabled', 'true'); $('#levFrom').change(function() { $('#levTo').attr('disabled', 'false'); }) pastDaysdisable() }); function pastDaysdisable() { var dtToday = new Date(); var month = dtToday.getMonth() + 1; var day = dtToday.getDate(); var year = dtToday.getFullYear(); if (month < 10) month = '0' + month.toString(); if (day < 10) day = '0' + day.toString(); var maxDate = year + '-' + month + '-' + day; $('#levFrom,#levTo').attr('min', maxDate); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Date From</label> <input type="date" id="levFrom" class="col-xs-12 form-control levFrom required"> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Date To</label> <input type="date" id="levTo" class="col-xs-12 form-control levTo required"> </div> 

Also,I am trying to restrict To date based on From date
To date should not allow to select the date before from date which I have choosed.How to do it?
I know its possible in date picker.But,I want to achieve it in input type=date.

Answer 1

Use $('#levTo').prop('disabled', false);

Use the prop() method to enable or disable elements when using jQuery

 $(document).ready(function() { $('#levTo').attr('disabled', 'true'); $('#levFrom').change(function() { $('#levTo').prop('disabled', false); pastDaysdisable($('#levFrom').val()) }) }); function pastDaysdisable(date) { $('#levFrom,#levTo').attr('min', date); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Date From</label> <input type="date" id="levFrom" class="col-xs-12 form-control levFrom required"> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <label class="col-xs-12">Date To</label> <input type="date" id="levTo" class="col-xs-12 form-control levTo required"> </div> 

Answer 2

Try using this:

$('#levFrom').on('change keyup paste',function (){
            $('#levTo').removeAttr('disabled');
        })

instead of:

$('#levFrom').change(function() {
$('#levTo').attr('disabled', 'false');

})