checkbox-group全选、勾选后面选项，前面自动勾选并且失效（不能跳着选择，只能选择连续选项）

需求：选择数据，并且计算选中数据。当选中后面的时候，前面制自动选择，当取消选中的时候，不能从中间选择，只能从最后开始取消。比如缴费，第一年、第二年、第三年等，不能跳过前面的直接缴费第3年。

一、数据处理

1、服务端数据

    一般为数组，数组里面是一个个json。

    遍历数据，向数据里面添加新属性，代码如下

data.forEach((item,index)=>{

    data[index].checked=false;//对每一条数据添加是否选中属性

    data[index].disabled=false;//对每一条数据添加是否无效属性

})

2、前端写死数据

类似下图。

数据json

二、全选

1、html代码

 

    

        

            

        

        

            第{{yearfees.year}}年  {{yearfees.money}}元

            

            

        

    

//当点击按钮时，触发all方法

    

        

            

        

        

            全选

        

    

2、js代码

// 全选

all(e){

this.Invention.forEach((item,index)=>{

console.log(item);

if(item.year>=this.yearprice){//计算选了几项

// allmoney2+=item.money;

this.num++;

console.log(this.num);

}

})

let index=e.detail.value;

this.allmoney=0;

this.num=0;

let allmoney2=0;

if(index=='1'){//当选择时，判断是否全选

this.Invention.forEach((item,index)=>{

this.Invention[index].disabled=true;//设置无效，关联属性:disabled="yearfees.disabled"

this.Invention[index].checked=true;//设置全选，关联属性:checked="yearfees.checked"

console.log(item);

})

this.allmoney=allmoney2+this.Latefee;

}else{

this.Invention[index].disabled=false;//设置有效

this.Invention[index].checked=false;//取消全选

}

},

三、选择一项，默认选择前面所有，及前面失效

代码如下：

checkboxChange(e){

let index=e.detail.value;

let indx2=[];

console.log(index[index.length-1]);//取选择数据数组最后一个，选择框vue为第几条数据

this.Invention.forEach((item,num)=>{//遍历循环所有数据

// debugger;

if(num<=index[index.length-1]){//遍历的数据小于选择的这一项

this.Invention[num].checked=true;

if(num!=0){

this.Invention[num-1].disabled=true;

}

indx2.push(num);

}else{

this.Invention[num].checked=false;

if(num!=0){

this.Invention[num-1].disabled=false;

}

}

})

},

四、完整代码

由于代码是从项目上摘取，使用时可适当修改