Angular4中复选框全选按钮的启用与禁用

这个客户的需求有些特别：要求单击表格行时自动勾选复选框（checkbox），同时在没有勾选任何行的情况下，相关按钮必须处于禁用状态。这种交互场景在实际项目中相当普遍，其设计思路也值得参考。

实现代码并不复杂，首先来看 HTML 表格部分的代码：

          
Logout Warnning
        

        

                
Your ha ve working order(s). if you logout the order(s) will be returned to the Pick Queue and all unconfirmed handling units will remove. Do you want to continue logout"table">
                
                  
                    
                        
                    
                    Phase Code
                    Delivery
                    Product
                  
                
                
                  
                    
                        
                    
                    
                        {{task.phaseCode}}
                    
                    
                        {{task.saP_DeliveryOrder_ID}}
                    
                    
                        {{task.saP_ProductOrder_ID|removeLeadingZeros}}
                    
                  
                
              
        
        

          Release and logout
          Logout only
        

接下来是核心的控制逻辑部分，主要实现全选、反选以及按钮启用/禁用状态的自动判断：

​​checkAll(ev: any) {​​
 ​​this.releaseTasks.releaseTaskDetails.forEach((x:any) => x.isChecked = ev.target.checked)​​
 ​​ }​​
 ​​isAllChecked() {​​
 ​​if(this.releaseTasks.releaseTaskDetails.length > 0​​
 ​​return this.canRelease = this.releaseTasks.releaseTaskDetails.every((_:any) => _.isChecked);​​
 ​​ }​​
 ​​return false;​​
 ​​ }​​
 ​​​​​​
    onModalSelectedRows(task
     : 
     any) {
    
    task.
     isChecked 
     = 
     !
     task.
     isChecked;
    
    let 
     len 
     = 
     0;
    
    this.
     releaseTasks.
     releaseTaskDetails.
     forEach((item
     : 
     any) 
     =>
    if(
     item.
     isChecked) {
    
    len 
     ++;
    
    
      }
    
    
      });
    
    if(
     len 
     === 
     0) {
    
    this.
     canRelease 
     = 
     false;
    
    else{
    
    this.
     canRelease 
     = 
     true;
    
    
      }
    
    
      }
    ​​​​

后台 Controller 部分用于查询当前用户未完成的操作记录，并将结果组装成视图模型后返回给前端：

var activityQuery = from op in _context.OperatorActivities    where op.Operator_ID == userName && !op.IsComplete && !op.IsReleased && !op.IsException     select op;
            
            ReleaseTask relesaseTask = new ReleaseTask();

            if(activityQuery.Any()){
                foreach (var activity in activityQuery)
                {
                    ReleaseTaskViewModel taskDetail = new ReleaseTaskViewModel();
                    taskDetail.SAP_DeliveryOrder_ID = getOrderById(activity.DeliveryOrder_ID);
                    taskDetail.SAP_ProductOrder_ID = getProductOrderById(activity.ProductionOrder_ID);
                    taskDetail.PhaseCode = activity.ActivityCode;
                    taskDetail.isChecked = true;
                    taskDetail.OperatorActivityId = activity.OperatorActivity_ID;
                    taskDetail.DeliveryOrder_ID = activity.DeliveryOrder_ID;
                    taskDetail.ProductionOrder_ID = activity.ProductionOrder_ID;
                    taskDetail.Operator_ID = activity.Operator_ID;
                    taskDetail.OrderId = activity.ActivityCode == "MAKE" ? activity.ProductionOrder_ID : activity.DeliveryOrder_ID;
                    taskDetail.isPersistent = isPersistent(activity.ProductionOrder_ID);
                    if(!taskDetail.isPersistent) {
                        relesaseTask.ReleaseTaskDetails.Add(taskDetail);
                    }
                }
            }
            return(Ok(new { success = true, data = relesaseTask}));

总体来看，该需求的关键实现要点如下：点击表格行时切换对应 checkbox 的选中状态，同时实时统计已勾选行的数量。当选中数量为零时，将“Release and logout”按钮置为禁用；有任意行被选中时，按钮则恢复启用。全选复选框通过 isAllChecked() 和 checkAll() 方法实现联动，逻辑清晰且易于扩展。如果遇到类似的场景，直接套用这套基于 Angular 的事件绑定与状态管理模式，即可快速完成开发。