Почему отключенный атрибут не удаляется в модале?

Question

У меня есть модал, где пользователь может загрузить свой файл. По умолчанию кнопка загрузки отключена. Итак, когда у пользователя есть файл вставки, должна быть включена кнопка. Но этого не случилось. Любой, пожалуйста, помогите.

Я также попробовал 2 метода ниже, но не помог.

HTML

<div class="modal-header">
    <h4 class="modal-title text-orange2">Upload ES Value File</h4>
    <button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<form name="esvalueForm" id="esvalueForm" action="" method="POST" enctype="multipart/form-data">
    <div class="modal-body">
        <div class="pd-20 bg-white border-radius-4">
            <div class="row">
                <div class="col-lg-12 col-sm-12">
                    <div class="custom-file">
                        <input type="file" name="upload_file" id="esvaluefile" class="import-file" accept=".csv">
                    </div>
                </div>
            </div>
        </div>
        </div>
            <div class="modal-footer">
                <button type="button" id="btnUpload" class="btn btn-primary" data-toggle="modal" data-target="#confirmation-upload" disabled>UPLOAD</button>
            </div>
        </div>
    </div>
</form>

JS (2 метода)

$("#esvaluefile").change(function() {
    if ($("#esvaluefile").val() == "") {
        $("#btnUpload").attr('disabled', true);
    }
    else {
        $("#btnUpload").removeAttr("disabled");
    }
});

$("#esvaluefile").on('show.bs.modal', function (e) {
    if ($("#esvaluefile").val() == "") {
        $("#btnUpload").attr('disabled', true);
    }
    else {
        $("#btnUpload").removeAttr("disabled");
    }
});

Answer 1

Попробуйте использовать prop ()

function toggleUploadButton() {
    $("#btnUpload").prop('disabled', $("#esvaluefile").val() == "");
}
$("#esvaluefile").change(toggleUploadButton)
    .on('show.bs.modal', toggleUploadButton);