传入的值el-checkbox 选中后禁用
时间: 2023-11-24 08:59:49 浏览: 29
你可以通过绑定 `v-model` 和 `:disabled` 属性来实现这个功能。以下是示例代码:
```html
<template>
<div>
<el-checkbox v-model="isChecked" :disabled="isChecked">选中后禁用</el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
isChecked: false
}
}
}
</script>
```
在上面的代码中,我们绑定了 `v-model` 到 `isChecked` 变量上,这个变量表示是否选中了复选框。同时,我们把 `:disabled` 属性绑定到 `isChecked` 上,这样当复选框被选中后,就会禁用它。
相关问题
el-checkbox-group 传入值,选中的el-checkbox 子项禁用,未选中的可用
你可以通过 `v-model` 绑定 `el-checkbox-group` 的选中值,然后使用 `:disabled` 绑定每个 `el-checkbox` 的禁用状态。当选中值包含当前 `el-checkbox` 的值时,该 `el-checkbox` 将被禁用。
以下是一个示例代码:
```html
<template>
<el-checkbox-group v-model="selectedValues">
<el-checkbox v-for="item in options" :key="item.value" :label="item.value" :disabled="isDisabled(item)">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' }
],
selectedValues: []
};
},
methods: {
isDisabled(item) {
return this.selectedValues.includes(item.value);
}
}
};
</script>
```
在上面的示例中,当某个选项被勾选时,其他未被勾选的选项依然可用,但是被勾选的选项将被禁用。
el-checkbox勾选后禁用
可以在el-checkbox中添加属性:disabled来禁用勾选功能。例如:
```html
<el-checkbox v-model="isSkip" true-label="Y" false-label="N" disabled>跳过条件</el-checkbox>
```
这样就可以禁用勾选功能了。如果需要在勾选后禁用,可以在v-model绑定的变量isSkip为true时添加disabled属性。例如:
```html
<el-checkbox v-model="isSkip" true-label="Y" false-label="N" :disabled="isSkip">跳过条件</el-checkbox>
```
这样当isSkip为true时,勾选后就会禁用勾选功能了。