input type="time" delete value when checkbox is unchecked

Question

Good afternoon everyone. I have the following HTML code

<input type="checkbox" id="checkmarcacao1" name="checkmarcacao1" value="checkmarcacao1">
<input type="time" id="hora101" name="hora101" disabled="disabled">

And I also have the following Javascript code

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(document).ready(function () {
    $(''input[name=checkmarcacao1]'').change(function() {
    if ($(this).is('':checked'')) {
        $(''input[name=hora101]'').removeAttr(''disabled'');
        } else {
        $(''input[name=hora101]'').attr(''disabled'',true);
        }
    });
});
</script>

This Javascript code of mine does the following: When my Checkbox is checked, it enables the input time. If I uncheck the checkbox, input time is disabled.

It turns out that if I check the checkbox, write in input time, for example: 12:34, then uncheck the checkbox input time is disabled but the value 12:34 is still written in it.

I would like to know how to delete the input time value when the checkbox is unchecked.

Anyone who wants to test the code follows the link: https://jsfiddle.net/o8f3zvqu/

Answer 1

Hello, you can clear the value of input with .val() every time you check the checkbox, it solves the problem

$(document).ready(function () {
    $('input[name=checkmarcacao1]').change(function() {
    
    $('input[name=hora101]').val('') // aqui ele limpa o valor do input
    
    if ($(this).is(':checked')) {
        $('input[name=hora101]').removeAttr('disabled');
        } else {
        $('input[name=hora101]').attr('disabled',true);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkmarcacao1" name="checkmarcacao1" value="checkmarcacao1">
<input type="time" id="hora101" name="hora101" disabled="disabled">