Question

此项目使用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
});

Answer 1

通过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
});

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

1 个答案: