在使用antd 2.2版本遇到的大坑（复选框设置disable不起作用）

最新推荐文章于 2023-04-10 16:52:52 发布
最新推荐文章于 2023-04-10 16:52:52 发布
阅读量945 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： ant Design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Yetian_2000/article/details/118959704
没有检索到摘要

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.因为我使用vue 3.0使用的antd是2.2版本，但无意中打开的是1.7版本的antd文档。他们在getCheckboxProps函数返回的对象有所区别：2.2版本直接返回一个对象形式 1.7版本返回是props：{}
对象。我在项目中多写了props，所以导致不起作用。

antd 表单项联动验证时，disabled属性不生效
一枚不断学习的小码农一枚~
11-07 1666
在antd表单中，表单项验证条件是根据其他表单项的值决定的，比如当前【时间限制】选择【无】时，【限制时段】表单项不可用所以我单纯使用是不生效的，因为，而直接使用 【获取表单字段属性】有可能是上一次的状态 ，导致渲染失败。
antd input框使用disable问题
Wfj521的专栏
01-26 3564
如果按照官网的方法 <input nz-input placeholder="Basic usage" [(ngModel)]="value" [disabled]="true" /> 官方示例是正常的，但用在自己的项目中鼠标悬停会有一个红色的不可输入符号，但是依然可以获取焦点并修改值 如果使用html5 <input nz-input placeholder="Basic usage" [(ngModel)]="value" disabled="true" />页面效.
Element-UI Checkbox 多选框 disabled（禁用后）选中样式无效问题
bydongxin的博客
09-29 9299
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;
vue+antd的树形选择器符合条件的选项禁用
hd_hckt的博客
04-10 912
vue-antd-tree-selsect
disabled=true；失效
qq_46053974的博客
02-26 1427
jquery disabled
关于ant design vue 表格s-table复选框无法清空的问题：
qq_36713889的博客
05-08 1910
关于ant design vue 表格s-table表格复选框清空的问题： 1.将selectedRows和selectedRowKeys 值置空，然后清空表格的复选框。2.this.$refs.table.clearSelected() 。
在react项目中使用antd的form组件,动态设置input框的值
01-18
点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用...
限制复选框的最大可选数
12-03
在网页设计中，有时我们需要对用户的选择行为进行限制，例如限制用户最多只能选择一定数量的复选框。这个示例代码就是实现这一功能的具体方法，它通过JavaScript来控制复选框的最大可选数。 首先，代码中定义了两个...
react实现复选框全选和反选组件效果
11-19
在React开发中，实现复选框全选和反选功能是一项常见的需求，特别是在表单或者数据筛选场景下。本文将详细解析如何通过React组件来实现这一功能。 首先，我们需要创建一个名为`List`的React组件。这个组件会包含一...
带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选
11-13
在IT领域，尤其是在前端开发中，构建用户界面时经常需要处理多级目录树结构，并且在这样的结构中加入复选框功能，以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...
实现table表格checkbox复选框的全选 反选
11-11
在网页开发中，表格（Table）是常用的数据展示方式，而复选框（Checkbox）则为用户提供多选功能。在HTML的表格中实现复选框的全选与反选功能，能够大大提升用户体验，使用户可以便捷地选择一组数据。这里我们将详细...
checkbox的disabled属性
baidu_29862663的博客
07-23 2万+
checkbox的disabled属性比较神奇，以前的认识是： disabled=true，标签不可选，即disabled有效； disabled=false，标签可选，即disabled无效。 实际情况如下： 如果标签不带disabled属性，自然是可以勾选的 但是 或者  仍是不可选的，并且如果打印disabled的属性： alert(document.
【小程序】解决uni-app使用了checkbox-group组件并更改checkbox的disabled,页面不更新的问题
gz-郭小敏的博客
06-18 4852
原始代码： <checkbox-group @change="selectCheckBox($event,three,two)" v-for="(three,threeIndex) in threeList" :key="threeIndex"> <label class="firstLevelTitle"> <checkbox :value="three.id" :checked="three.checked" :disabled="!three..
ant-design-vue的兼容问题2
lyd的博客
08-25 3793
问题：ant-design-vue不兼容ie浏览器 要求：ie兼容 >= 9 环境：@vue/cli@4.5.4，ant-design-vue@1.6.4 之前写了一篇博文解决ant-design-vue的兼容，由于@vue/cli搭建项目升级导致不能生效，为了解决这个遗憾，本片博文诞生 第一步：安装依赖 npm install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtime npm inst
easyUI combobx不能选择
wuyongde0922的专栏
01-05 1314
今天一个这样的需求，combobx不能选择，有人可能说那还不简单，直接放值就可以了，但是那样不是很好看，要看到combobox样子，但是不能让用户选择，需要这样： $('#Id号').combobox('enable'); //可用 $('#Id号').combobox('disable'); //不可用
react/antd checkbox 默认选中无效，checkbox.Group包裹默认选中无效
qq_27307951的博客
11-17 5717
然而，当我把checkbox嵌套到表单内部的时候，不管设置checkbox还是checkbox.group的defaultvalue/value/checked属性，都是没有效果的。在我们设计网页的时候，经常会使用到checkbox多选框，有时候设置默认选中的情况，会发现失效，在网页上没有效果，找了不少资料，还是没有解决问题。更新默认选中值的时候，我们可以通过获取数据的时候，就给state加上一个默认值的数组，因为react受控的特性，才能及时渲染刷新页面。我的代码开始代码是这样的。
Ant Design vue a-checkbox-group 不生效
qq_51622532的博客
02-24 2949
Ant Design vue a-checkbox-group 不生效
Ant Design table自定义复选框的默认不可选状态
weixin_42458930的博客
08-01 1万+
vue用ant design我也是第一次用，关于table自定义的东西使用起来一踩一个坑。 我的需求是已经添加过的人员，下一次不可以再添加了，使用复选框的disabled属性。官网上的getCheckboxProps中的disabled的值是record.name==="XXX"，我在用的过程中肯定是一个list，然后我就想用函数返回true或false，虽然功能不影响，但是打印台一直报错，提示...
$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法
热门推荐
03-18 4万+
$('#checkbox').attr('checked'); 返回的是checked或者是undefined，不是原来的true和false了，有关此问题的解决方法如下 在JQ1.6之前的版本，我们会这样写我们的代码：  //获取是否选中 var isChecked = $('#cb').attr('checked'); //设置选中 $('#cb').attr(
antd动态生成60个复选框
最新发布
05-07
### Ant Design 中动态生成多个复选框的实现 在 Ant Design (antd) 中，可以通过 `Checkbox.Group` 来实现动态生成多个复选框的功能。以下是具体的实现方法： #### 1. 数据准备 首先需要准备好要展示的数据源，通常是一个数组结构，其中每个元素表示一个复选框的内容。 ```javascript const plainOptions = Array.from({ length: 60 }, (_, index) => `选项 ${index + 1}`); ``` 这段代码通过 `Array.from` 方法生成了一个长度为 60 的数组，每个元素代表一个复选框的名称[^1]。 #### 2. 渲染复选框组 使用 antd 提供的 `Checkbox.Group` 组件可以轻松地渲染一组复选框，并绑定其值变化事件。 ```jsx import React, { useState } from 'react'; import { Checkbox } from 'antd'; function App() { const [checkedList, setCheckedList] = useState([]); const plainOptions = Array.from({ length: 60 }, (_, index) => `选项 ${index + 1}`); const onChange = (list) => { console.log('当前选中的项:', list); setCheckedList(list); }; return ( <div> <h3>已选中:</h3> <p>{checkedList.join(', ') || '无'}</p> <Checkbox.Group options={plainOptions} value={checkedList} onChange={onChange}> {plainOptions.map((option) => ( <Checkbox key={option} value={option}> {option} </Checkbox> ))} </Checkbox.Group> </div> ); } export default App; ``` 在这段代码中： - 使用了 `useState` 钩子来管理选中的复选框状态。 - 定义了 `plainOptions` 数组作为复选框的选项集合。 - 利用了 `Checkbox.Group` 的 `options` 属性或者手动映射的方式来渲染每一个复选框[^2]。 #### 3. 自定义样式优化 如果默认的布局不符合需求，还可以自定义样式调整间距或排列方式。 ```css .custom-checkbox-group .ant-checkbox-wrapper { display: block; /* 垂直排列 */ margin-bottom: 8px; } ``` 应用 CSS 类名时需注意与 JSX 结构对应起来。 ```jsx <Checkbox.Group className="custom-checkbox-group"> {/* ... */} </Checkbox.Group> ``` 这样可以让大量复选框更加美观易读[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值