根据数据值启用/禁用按钮

Question

在我的应用程序中，在索引视图中，我想根据它们的值显示和隐藏一些按钮。需要大家帮忙做这个操作。

这是我的索引视图。

<div class="card-body p-0">
        <table id="MyRequest" class="table table-striped">
            <thead>
                <tr>
                    <th style="width: 1%">
                        Request Number
                    </th>
                    <th>
                        Request Type
                    </th>
                    <th>
                        Created Date
                    </th>
                    <th>
                          Request Heading
                    </th>
                    <th>
                        Request Timeline
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.OrderByDescending(i => i.Id))
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Id)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ReqestTypeDisplay)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Created_Date)
                        </td>
                        <td>
                             @Html.DisplayFor(modelItem => item.Req_Heading)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ReqestApprovalStatus)
                        </td>
                        <td>
                            @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn btn-primary pull-right" })
                            @Html.ActionLink("Details", "Details", new { id = item.Id }, new { @class = "btn btn-warning pull-right" })
                            @Html.ActionLink("Approval", "Index", "ReportsViewModel", new { id = item.Id }, new { @class = "btn btn-success pull-right" })
                            @Html.ActionLink( "Delete", "Delete", new { id = item.Id },new { onclick = "return confirm('Are you sure you wish to delete this article?');", @class = "btn btn-danger pull-right" })
                            
                        </td>
                    </tr>
                }

            </tbody>
        </table>
    </div>

HTML view

RequestApprovalStatus 列中有值。我想启用编辑按钮，只有 Approval Status 值等于 At Department head 。否则，我想禁用编辑按钮，如果批准状态等于 Approved Only，则只能启用批准按钮。有人可以帮我解决这个问题。这可以使用 jQuery 完成吗？

Answer 1

虽然可以使用客户端 JS 执行您要求的操作，但如果您可以访问服务器端的数据（如您的示例所示），那么更好的方法 到目前为止 是禁用服务器端的按钮。

鉴于“按钮”实际上是锚元素，禁用它们并不像添加disabled 属性那么简单。但是，从应用于元素的类名称看来，您正在使用 Bootstrap。因此，您可以将disabled 类添加到链接中，Bootstrap 库会阻止您点击链接。

话虽如此，试试这个：

@foreach (var item in Model.OrderByDescending(i => i.Id))
{
  var editClass = item.RequestApprovalStatus == "At Department head" ? "" : "disabled";
  <tr>
    <td>
      @Html.DisplayFor(modelItem => item.Id)
    </td>
    <td>
      @Html.DisplayFor(modelItem => item.ReqestTypeDisplay)
    </td>
    <td>
      @Html.DisplayFor(modelItem => item.Created_Date)
    </td>
    <td>
      @Html.DisplayFor(modelItem => item.Req_Heading)
    </td>
    <td>
      @Html.DisplayFor(modelItem => item.ReqestApprovalStatus)
    </td>
    <td>
      @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = $"btn btn-primary pull-right " + editClass })
      @Html.ActionLink("Details", "Details", new { id = item.Id }, new { @class = "btn btn-warning pull-right" })
      @Html.ActionLink("Approval", "Index", "ReportsViewModel", new { id = item.Id }, new { @class = "btn btn-success pull-right" })
      @Html.ActionLink( "Delete", "Delete", new { id = item.Id },new { onclick = "return confirm('Are you sure you wish to delete this article?');", @class = "btn btn-danger pull-right" })
    </td>
  </tr>
}