使用if else条件禁用图标

Question

在我的表格中，我为edit and cancel actions添加了两个图标，其中我试图达到以下条件：如果状态为， pending - 可以同时执行批准和拒绝 approved - 只能执行取消 rejected,cancelled - 不应允许同时执行这两项操作 但是cancel也禁用Approved。我做错了什么？

function leaveTable() {
     for (var i = 0; i < leaveList.length; i++) {
      if (leaveList[i].Status == "Approved") {
                        $(".editAction").attr('disabled', true);
                    }
                    else if (leaveList[i].Status == "Rejected" || "Cancelled"){
                    $(".editAction,.cancelAction").attr('disabled', true);
                    }
                    else {
                        $(".editAction,.cancelAction").attr('disabled', false);
                    }

         var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn editLev fa fa-calendar-plus-o editAction" onclick="editLevDetails(this)" ></i><i class="btn dltLev fa fa-times cancelAction"  onclick="cancelLeave(this)" data-dismiss="modal"  value="Cancelled" id="' + leaveList[i].LeaveTypeId + '"></i></td><tr>';

         $('#levListTable').append(tab)
     }
 }

点击此处：https://jsfiddle.net/tytzuckz/24/

Answer 1

解决方案：

https://jsfiddle.net/dalinhuang/5h1ybdp1/2/

您的代码中存在很少的错误：

错误1

leaveList[i].Status应该leaveList[i].status注意小写s？

bug 2

leaveList[i].status == "Rejected" || "Cancelled"不起作用，您需要这样做： else if (leaveList[i].status == "Rejected" || leaveList[i].status == "Cancelled")

bug 3

$(".editAction")将定位所有名为editAction的类并对其执行操作，但它只会定位您已创建的类，而不是您要创建的。

示例：这里我只修改了你的其他if else if (thisStatus == "Rejected" || thisStatus == "Cancelled")，因为你看不到任何东西被禁用，为什么？ Because your last for loop status are = pending并点击其他条件并调用此$(".editAction,.cancelAction").attr('disabled', false);以启用所有条件。 https://jsfiddle.net/dalinhuang/tytzuckz/27/

id在这里做了什么：

我添加了editDis和cancelDis作为禁用指示符，默认为''所以不会禁用任何内容，使用以下if检查是否应该禁用任何按钮然后我将它们更新为例如editDis = ' disabled '，然后在最后我将它们放入编辑按钮标记并取消按钮标记，如果editDis的值为''，则不会禁用该按钮，否则它将disabled因此禁用该按钮。

function leaveTable() {
  for (var i = 0; i < leaveList.length; i++) {
    var editDis = '';
    var cancelDis = '';
    var thisStatus = leaveList[i].status;
    if (thisStatus == "Approved") {
      console.log('what>');
      editDis = ' disabled ';
    } else if (thisStatus == "Rejected" || thisStatus == "Cancelled") {
      editDis = ' disabled ';
      cancelDis = ' disabled ';
    }

    var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn editLev fa fa-calendar-plus-o editAction" onclick="editLevDetails(this)" ' + editDis + '></i><i class="btn dltLev fa fa-times cancelAction"  ' + cancelDis + ' onclick="cancelLeave(this)" data-dismiss="modal"  value="Cancelled" id="' + leaveList[i].LeaveTypeId + '"></i></td><tr>';

    $('#levListTable').append(tab)
  }
}

Answer 2

试试这个，并告诉我它是否有效。

function leaveTable() {
     for (var i = 0; i < leaveList.length; i++) {
      if (leaveList[i].Status == "Approved") {
                        $(".editAction").attr('disabled', 'disabled');
                        $(".cancelAction").removeAttr('disabled');
                    }
                    else if (leaveList[i].Status == "Rejected" || "Cancelled"){
                    $(".editAction,.cancelAction").attr('disabled', 'disabled');
                    }
                    else {
                        $(".editAction,.cancelAction").removeAttr('disabled');
                    }

         var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn editLev fa fa-calendar-plus-o editAction" onclick="editLevDetails(this)" ></i><i class="btn dltLev fa fa-times cancelAction"  onclick="cancelLeave(this)" data-dismiss="modal"  value="Cancelled" id="' + leaveList[i].LeaveTypeId + '"></i></td><tr>';

         $('#levListTable').append(tab)
     }
 }