uni-app checkbox 复制官网案例 set check为false 依旧可以取消选中状态

uni-app checkbox 复制官网案例 set check为false 依旧可以取消选中状态

示例代码：

checkboxChange: function (e) {  
    var items = this.items,  
        values = e.detail.value;  
    for (var i = 0, lenI = items.length; i < lenI; ++i) {  
        const item = items[i]  
        if(values.includes(item.value)){  
            this.$set(item,'checked',true)  
        }else{  
            //this.$set(item,'checked',false)  
        }  
    }  
}

操作步骤：

checkboxChange: function (e) {  
    var items = this.items,  
        values = e.detail.value;  
    for (var i = 0, lenI = items.length; i < lenI; ++i) {  
        const item = items[i]  
        if(values.includes(item.value)){  
            this.$set(item,'checked',true)  
        }else{  
            //this.$set(item,'checked',false)  
        }  
    }  
}

预期结果：

把else 注释掉 应该点击选中之后 就无法取消选中才对 但是 点击已选中的 依旧可以取消 选中状态

实际结果：

把else 注释掉 应该点击选中之后 就无法取消选中才对 但是 点击已选中的 依旧可以取消 选中状态

bug描述：

官网checkbox案例 完整复制下来

checkboxChange: function (e) {
    var items = this.items,
    values = e.detail.value;
    for (var i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i]
        if(values.includes(item.value)){
            this.$set(item,'checked',true)
        }else{
            //this.$set(item,'checked',false)
        }
    }
}

把else 注释掉 应该点击选中之后 就无法取消选中才对 但是 点击已选中的 依旧可以取消 选中状态


更多关于uni-app checkbox 复制官网案例 set check为false 依旧可以取消选中状态的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

vue基础知识；value不是v-model你理解成双向数据绑定。

更多关于uni-app checkbox 复制官网案例 set check为false 依旧可以取消选中状态的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是因为checkbox的选中状态实际上是由组件内部维护的，即使你在代码中强制设置checked为true，用户点击时组件内部仍会触发状态变更。要实现"选中后不可取消"的效果，需要额外处理：

  1. 使用disabled属性替代：
checkboxChange: function(e) {
    const values = e.detail.value;
    this.items.forEach(item => {
        if(values.includes(item.value)) {
            this.$set(item, 'checked', true);
            this.$set(item, 'disabled', true); // 选中后禁用
        }
    });
}
  1. 或者阻止默认事件：
<checkbox [@click](/user/click).native.prevent="handleCheck" />

handleCheck(e) {
    if(e.target.checked) {
        e.preventDefault();
    }
}
回到顶部