Скрыть кнопки на странице по специальному атрибуту JQuery

Question

Я новичок в сети. У меня есть такая таблица:

<tbody> 
     @foreach (var item in Model) 
     { 
      <tr> 
       <td> 
        @item.DateStart.ToShortDateString() 
       </td> 
       <td> 
        @item.DateEnd.ToShortDateString() 
       </td> 
       <td data-name="@item.Id" data-approved="@item.Approved.ToString()"> 
        @item.Approved.ToString() 
       </td>     
       <td> 
        @item.FirstName.ToString() @item.LastName.ToString() 
       </td> 
       <td> 
        @item.Position.ToString() 
       </td> 

       <td> 
        <button class="btn btn-primary accept-button" data-id="@item.Id">Accept</button>    
        <button class="btn btn-danger decline-button" data-id="@item.Id"> Decline</button> 
       </td> 
      </tr> 
     } 
    </tbody> 

И я написал сценарий для кнопок на этой странице:

$(document).ready(function() { 
    $('#requestTable').DataTable(
     { 
      aoColumns: [ 
      { mDataProp: "DateStart", sTitle: "Date Start" }, 
      { mDataProp: "DateEnd", sTitle: "Date End" }, 
      { mDataProp: "Approved", sTitle: "Approved" }, 
      { mDataProp: "Data", sTitle: "Employee" }, 
      { mDataProp: "Position", sTitle: "Position" }, 
      { mDataProp: "", sTitle: "" } 
      ], 
      columnDefs: [{ 
       targets: 'no-sort', 
       orderable: false 
      }] 
     }); 

    $('button.accept-button').click(function() { 
     var id = $(this).attr('data-id') 
     var appr = $('td[data-name="' + id + '"]'); 
     appr[0].textContent = "True"; 
     $.ajax({ 
      type: "POST", 
      url: "/TableRequest/AcceptRequest", 
      data: { 'id': id }, 
      success: function (msg) { 
      } 
     }); 
    }); 
    var tempId; 
    $('button.decline-button').click(function() { 
     tempId = $(this).attr('data-id') 
     var appr = $('td[data-name="' + tempId + '"]'); 
     appr[0].textContent = "False"; 
     $("#dialog").dialog() 
    }); 
    $('button.ok-request').click(function() { 
     var message = $('textarea#commentForDecline').val(); 

     $.ajax({ 
      type: "POST", 
      url: "/TableRequest/DeclineRequest", 
      data: { 'message': message, 'id': tempId }, 
      success: function (msg) { 
      } 
     }); 
     $("#dialog").dialog('close'); 
     $('textarea#commentForDecline').val(''); 
    }); 

    hideButtons(); 

}); 
function hideButtons(){ 
     // var appr = $('td[data-name="' + id + '"]'); 
     var appr = $("td[data-approved='false']"); 
     var 
     if(appr[0].textContent == "True") 
     { 
      $('button.accept-button').hide(); 
     } 
     if(appr[0].textContent == "False") 
     { 
      $('button.decline-button').hide(); 
     } 
    }; 

Я хочу, чтобы скрыть кнопки в зависимости от Approved поля в таблице. Если верно @item.Approved.ToString() - нужно скрыть, но «принять», иначе - «уклонение». Может кто-нибудь мне помочь?

Answer 1

<td> 
@if (item.Approved) 
{    
    <button class="btn btn-danger decline-button" data-id="@item.Id"> Decline</button> 
} 
else 
{ 
    <button class="btn btn-primary accept-button" data-id="@item.Id">Accept</button> 
} 
</td> 

Я предположил, что item.Approved является логическим. Если нет, вам нужно изменить if-предложение.

Answer 2

Вы можете добиться этого с помощью:

$('td[data-approved=true]').nextAll('td').find('button.accept-button').hide(); 

$('td[data-approved!=true]').nextAll('td').find('button.decline-button').hide(); 

Answer 3

Вы можете добавить «ButtonApproved» + item.approved.toString() как один из классов на ваших кнопках, а затем сделать $ («. ButtonApprovedFalse»). Hide(). Или иначе определите класс ButtonApprovedFalse как скрытый. Поскольку вы не используете это как класс в другом месте, скрываются только кнопки, которые «не одобрены». Когда вы нажмете на кнопку «Не одобрить», просто добавьте к этой кнопке класс «ButtonApprovedFalse»: $ (this) .AddClass («ButtonApprovedFalse»).