单击列表中的Bootstrap输入按钮禁用其他按钮

Question

This project uses Twitter Bootstrap, and a page lists saved files for either retrieval or deletion. If the user clicks a "Download" input button in the list, other files' "Download" button clicks don't fire. How can the buttons be set up such that a user can just go down the line and download each file one after the other?

I've tried setting the button id to enabled or active at the end of the download script, but that hasn't worked. Does anyone see what's going on here? Thanks in advance!

List in View:

<div class="panel panel-default" id="uploadPanel">
    <div class="panel-heading">Uploaded Files</div>
    <div class="panel-body">
        <table id="dt_basic" class="table table-striped">
            <thead>
                <tr>
                    <th style="display:none"></th>
                    <th class="text-center">File Name</th>
                    <th class="text-center">Uploaded Date</th>
                    <th class="text-center">Uploaded By</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @if (Model.UploadedFiles.Any())
                {
                    foreach (var record in Model.UploadedFiles)
                    {
                        <tr>
                            <td style="display:none">@record.UploadedFileID</td>
                            <td align="center">@record.UploadedFileName</td>
                            <td align="center">@String.Format("{0:d}", @record.UploadedFileDate)</td>
                            <td align="center">@record.UploadedBy</td>
                            <td align="center"><input type="button" class="btn btn-info" id="downloadFile" value="Download"> | <input type="button" class="btn btn-warning" id="deleteFile" value="Delete"></td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>
</div>

The script for downloading a file:

$("#downloadFile").click(function () {
    var cells = $(this).closest('tr').children('td');
    var $id = Number(cells.eq(0).text());
    var $url = '@Url.Action("DownloadFile", "Files", new { id = "_id_" })';
    document.location.href = $url.replace("_id_", $id);
    //Tried re-activating and re-enabling $("downloadFile") here, but to no avail
});

Answer 1

Do it by class assign as opposed to id

 <td align="center"><input type="button" class="btn btn-info downloadFile"  value="Download"> | <input type="button" class="btn btn-warning deleteFile" value="Delete"></td>


$(".downloadFile").click(function () {
    var cells = $(this).closest('tr').children('td');
    var $id = Number(cells.eq(0).text());
    var $url = '@Url.Action("DownloadFile", "Files", new { id = "_id_" })';
    document.location.href = $url.replace("_id_", $id);
    //Tried re-activating and re-enabling $("downloadFile") here, but to no avail
});