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

Posted 2023-05-08

【中文标题】根据数据值启用/禁用按钮

【英文标题】：Enable/Disable button according with the data values

【发布时间】：2021-12-13 11:22:29

【问题描述】：

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

这是我的索引视图。

<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 完成吗？

【问题讨论】：

也许这样的事情会奏效。编辑“按钮”的类new @class = "btn btn-primary pull-right" + (item.ReqestApprovalStatus == "At Department head" ? "disabled":"")

@CarstenLøvboAndersen 谢谢。这种方法也行得通。并设置值“禁用”我替换了“btn-primary disabled”然后它起作用了。谢谢

【参考方案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>

【讨论】：

谢谢。这种方法也行得通。并设置值“禁用”我替换了“btn-primary disabled”然后它起作用了。谢谢

没问题，很高兴为您提供帮助