Element-UI Checkbox 多选框 disabled（禁用后）选中样式无效问题

最新推荐文章于 2025-04-14 14:34:18 发布
最新推荐文章于 2025-04-14 14:34:18 发布
阅读量9.2k 收藏 5
点赞数 3
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bydongxin/article/details/108868607
版权

Element-UI Checkbox 多选框按钮样式 disabled（禁用后）选中样式无效问题

增加以下样式即可

.el-checkbox-button.is-disabled.is-checked .el-checkbox-button__inner {
    color: #FFFFFF;
    background-color: #1890ff;
    border-color: #1890ff;
    -webkit-box-shadow: -1px 0 0 0 #74bcff;
    box-shadow: -1px 0 0 0 #74bcff;
}

未修改效果
在这里插入图片描述

已修改后效果
在这里插入图片描述

解决ElementUI级联选择器的禁用样式问题
weixin_38514634的博客
01-16 5520
解决ElementUI级联选择器的禁用样式问题发现问题解决写在最后 发现问题 最近我在项目中使用到了ElementUI级联选择器，不得不说ElementUI真的很强大（老师说在批评一个人的缺点之前需要先肯定他的优点，这样才不会被打），然而在当我根据具体场景需要禁用这个级联选择器的时候，发现了如下几个问题： 1 禁用的字体都是灰色的，但是中间的分隔符还是黑色的 2 虽然是禁用状态，但是鼠标移入到下拉...
Element-UI 并排显示多个 disabled按钮的时候， 不生效问题解决
m0_63064861的博客
06-27 540
Element-UI 并排显示多个 disabled按钮的时候， 不生效问题解决
el-checkbox禁用样式修改（改为正常样式）
HTE_YOUNG_MAN的博客
08-29 1877
el-checkbox禁用样式修改（
el-table 复选框全部禁用时实现全选禁用
最新发布
qq_51201589的博客
04-14 359
第一步 自定义表头样式。 第二步 自定义全选函数。
【elementUI】（el-table）设置表格行的checkbox为禁用状态
H_Lu711的博客
07-01 6962
【elementUI】（el-table）设置表格行的checkbox为禁用状态
elementUI中el-checkbox-group,动态禁用el-checkbox项
qq_26780317的博客
09-08 8684
前言： 最近在项目中，需要一个动态禁用el-checkbox选项的功能，某些选项在某些场景下，需要禁止掉，让用户不可选的状态。 一、elementUI框架文档 elementUI框架文档只提供disabled的标签，这种状态是固定的，不是动态的，那么，如何给el-checkbox-group数组下面的某一项el-checkbox-button，动态添加禁用状态呢？ 二、动态添加 动态添加禁用标签，使用:disabled属性，前面加冒号，disabled后面接上禁用的条件。 <div class="f
elementui 解决Checkbox多选框 按钮样式禁用时不显示被选中的按钮
qq_58340302的博客
02-01 1946
找到选中项的对应class，对其的el-checkbox-button__inner加背景色
vue element ui el-checkbox 只在disabled才显示
Aa12364567的博客
05-17 503
vue element ui el-checkbox 只在disabled才显示。v-model绑定的对象（后端返回）为null值，改为数组即可。
Element-UI源码——Checkbox多选框
qq_43391730的博客
04-03 681
Checkbox多选框 checkbox.vue <template> <label class="el-checkbox" :class="[ border && checkboxSize ? 'el-checkbox--' + checkboxSize : '', { 'is-disabled': isDisabled }, { 'is-bordered': border }, { 'is-checke
【区分vue2和vue3下的element UI Checkbox 多选框组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
05-30 1216
在 Vue 2 中，Element UI 提供了和组件用于多选框功能。而在 Vue 3 中，Element UI 没有直接支持 Vue 3，但有一个名为 Element Plus 的项目提供了与 Element UI 类似但支持 Vue 3 的组件集。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中和组件的属性、事件和方法，并给出示例。
Element-UI全面入门与实战技巧
全世界的博客
06-06 1583
Element-UI 是一套基于 Vue 2.0 的桌面端组件库，由饿了么前端团队开发并维护。它提供了一系列丰富的 UI 组件，旨在帮助开发者快速构建高效、美观的 Vue 应用程序。Element-UI 是一款遵循 Ant Design 设计规范的 Vue UI 库，它涵盖了从按钮、输入框、选择器到表格、标签、进度条等众多常用的界面元素。Element-UI 的组件不仅功能全面，而且易于定制，使得开发者可以快速实现个性化的页面设计。Element-UI 的特点包括：在使用 Element-UI 之前，需要确
使用css禁用input、checkbox、select等html控件实现disable效果
12-14
用js的event可以用来阻止input,select,checkbox的默认事件，如 event.preventDefault() event.stopPropagation() 其实用纯CSS也能实现，如 input { pointer-events: none; } 然后用CSS把input变灰即可，50%透明度即可实现禁用的效果 input.disabled { pointer-events: none; opacity: 0.5; } 总结 以上所述是小编给大家介绍的使用css禁用input、checkbox、select等html控件实现disable
拜读及分析Element源码-checkbox多选框组件篇
weixin_34234823的博客
09-11 1585
element源码分析-checkbox多选框，感觉逻辑跟单选框很像，来看看吧。 checkbox多选框和单选框一样也分为三部分 checkbox-group：适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。 checkbox：多选。 checkbox-button： 按钮样式的多选。 checkbox-group 相当于把checkbox和checkbo...
checkbox的disabled属性
热门推荐
baidu_29862663的博客
07-23 2万+
checkbox的disabled属性比较神奇，以前的认识是： disabled=true，标签不可选，即disabled有效； disabled=false，标签可选，即disabled无效。 实际情况如下： 如果标签不带disabled属性，自然是可以勾选的 但是 或者  仍是不可选的，并且如果打印disabled的属性： alert(document.
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
qq3892997的博客
11-02 6660
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
在使用antd 2.2版本遇到的大坑（复选框设置disable不起作用）
Yetian_2000的博客
07-21 939
1.因为我使用vue 3.0使用的antd是2.2版本，但无意中打开的是1.7版本的antd文档。他们在getCheckboxProps函数返回的对象有所区别：2.2版本直接返回一个对象形式 1.7版本返回是props：{} 对象。我在项目中多写了props，所以导致不起作用。 ...
el-tree动态判断灵活设置checkbox的disabled
maogugu0319的博客
03-17 2651
el-tree动态判断条件灵活设置checkbox的disabled
vue循环生成的el-checkbox的控件双向绑定失效问题(选中、取消失效)
风中追风
09-23 7179
做到这里后，以为实现了功能，看效果发现问题: 点击时候，el-checkbox没有勾上，也没变化，但是checked的数值确实是变化了，但视图没有变化，那就说明：这样给值的checked没有和组件双向绑定上！！！
el-checkbox状态值修改而样式不修改的原因
qq_51741730的博客
09-14 3230
el-checkbox状态值修改而样式不修改的原因
el-checkbox-group el-checkbox 使用vue和element-ui，写两组el-checkbox-group ，每组都用v-for el-checkbox假数据，分别是随机生成水果和蔬菜的，且蔬菜是默认禁用的，选中水果中的苹果，才取消禁用，选中别的水果继续保持蔬菜禁用，请用具体代码实现
06-06
`el-checkbox-group` 和 `v-for` 分别渲染出水果和蔬菜的可选项，其中蔬菜的 `el-checkbox` 组件的 `:disabled` 属性绑定了 `vegetableDisabled` 变量，表示当 `vegetableDisabled` 为 `true` 时，蔬菜不可选。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值