单击列表中的引导输入按钮将禁用其他按钮

Clicking Bootstrap Input Button in List Disables Other Buttons

本文关键字：按钮 其他 输入 列表 单击      更新时间：2023-09-26

这个项目使用Twitter Bootstrap，一个页面列出了保存的文件以供检索或删除。 如果用户单击列表中的"下载"输入按钮，则不会触发其他文件的"下载"按钮单击。 如何设置按钮，以便用户可以下线并一个接一个地下载每个文件？

我尝试在下载脚本结束时将按钮 ID 设置为启用或活动，但这不起作用。 有人看到这里发生了什么吗？ 提前感谢！

视图中的列表：

<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>

下载文件的脚本：

$("#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
});

通过class分配而不是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
});
相关文章：