Attr does work, but removeAttr doesn't seem to work on my button

Question

I want to create my button in such way that it disables if the user hovers over it, but the input fields were to be empty. This works, however when I fill out everything and hover over the button again it remains disabled. I looked up this link: Remove disabled attribute using JQuery? and did what was said there (multiple answers tried), but none of them worked. I know the variables are correct, I already console.log(); those. So basically the question: What am I doing wrong or missing out on?

The code:

function submitBtn(tracker) {
    let btn = ($('<button/>', {
        'type': 'submit',
        'class': 'btn btn-primary',
        'id': 'submitDataBtn',
        'name': 'submitDataBtn',
        'value': 'submit'
    })).text('Submit').hover(function() {
        let datePicker = $('#datePicker').val();
        let weight = $('#weight').val();
        let distance = $('#distance').val();
        let timePicker = $('#timePicker').val();

        if(datePicker === '' || weight === '' || distance === '' || timePicker === '') {
            $(this).attr('disabled', true);

        }else if (datePicker !== '' || weight !== '' || distance !== '' || timePicker !== '') {
            $(this).prop('disabled', false);

        }else {
            // do something else
        }   
    });
    return btn;
}

Answer 1

Disabled button cannot have hover event. If you wish to show it as disabled use class with opacity. If you want to stop submission of the form - use validation on form, like:

document.getElementsByTagName("form")[0]).onsubmit=function() {
    return validate(this);
  }