Enable/Disable button according with the data values-CodePudding

In my application, in the index view I want to show and hide some buttons according with their values. Need a help of doing that operation from you all.

This is my Index view.

<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

There are values in the RequestApprovalStatus Column. I want to enable the edit button only the Approval Status value equals to At Department head . Otherwise I want to disable the edit button also Approval Button only can be enable if Approval Status equals to Approved Only. Can some one help me with this about how to do this. Can this done using jQuery ?

CodePudding user response：

While it's possible to do what you ask using client-side JS, if you have access to the data on the server side (as your example shows) then the better way by far is to disable the button on the server side.

Given that the 'buttons' are actually anchor elements, disabling them is not so simple as adding the disabled attribute. However, from the names of the classes applied to the elements it appears you're using Bootstrap. As such, you can add the disabled class to the links and the Bootstrap library will prevent the links being clicked for you.

With that said, try this:

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