限制复选框选择数量 - 当选择数量达到3个时禁用其他选项

限制复选框选择数量：当选中数量为3时禁用其他选项

在使用复选框时，有时需要限制用户选择的数量。例如，只允许用户选择3个选项，当用户选择了3个选项后，就需要禁用其他未选中的选项。本文将介绍如何在 checkboxChange 函数中添加逻辑来实现这个功能。

代码示例：

checkboxChange: function(e) {
    var items = this.listComposition,
        values = e.detail.value;
    values = values.map(Number)
    this.checkedValues = []
    var checkedCount = 0
    for (var i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i]
        if (values.includes(item.compositionId)) {
            this.$set(item, 'checked', true)
            var value = {
                'compositionId': item.compositionId
            }
            this.checkedValues.push(value)
            checkedCount++
        } else {
            this.$set(item, 'checked', false)
        }
    }
    if (checkedCount >= 3) {
        for (var i = 0, lenI = items.length; i < lenI; ++i) {
            const item = items[i]
            if (!values.includes(item.compositionId)) {
                this.$set(item, 'disabled', true)
            }
        }
    } else {
        for (var i = 0, lenI = items.length; i < lenI; ++i) {
            const item = items[i]
            this.$set(item, 'disabled', false)
        }
    }
}

代码解析：

1. 获取选中值和列表数据：

   • values = e.detail.value; 获取用户选中的复选框的值。
   • items = this.listComposition; 获取复选框列表数据。

2. 计数并更新选中状态：

   • 使用 checkedCount 变量记录已选中复选框的数量。
   • 遍历 items 列表，根据 values 中的值来更新每个复选框的 checked 属性。

3. 禁用或启用未选中选项：

   • 当 checkedCount >= 3 时，遍历所有复选框，将未选中的选项禁用 (disabled=true)。
   • 当 checkedCount < 3 时，遍历所有复选框，将所有选项启用 (disabled=false)。

注意：

• 上述代码中，this.$set 用于更新数据，具体实现取决于你所使用的框架或库。
• 你可以根据实际需求修改代码中的判断条件，例如限制选择数量、禁用或启用选项的逻辑等。

通过以上代码，就可以实现限制复选框选择数量的功能。当用户选择3个选项后，其他未选中的选项将被禁用，防止用户选择超过限制的数量。