保持 checkbox 选中状态不被修改

最新推荐文章于 2024-05-22 09:58:49 发布
最新推荐文章于 2024-05-22 09:58:49 发布
阅读量1.7w 收藏 3
点赞数 1
分类专栏： javasrcipt 文章标签： javascript input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/netingcn/article/details/2585745
版权

对于input type为text时，可以用readonly属性来控制让它的内容不能被修改，然而checkbox则没有这个属性，此时可以通过javascript来达到这个目的，只需要在checkbox 的onclick事件方法上加上 return false; 这样的javascript代码即可，这样就不能修改checkbox的状态了。如

<input type="checkbox" οnclick="return false;">

netingcn
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
checkbox设置复选框的只读效果不让用户勾选
12-01
在Web开发中，有时候需要显示一些复选框（checkbox），表明这个地方是可以进行勾选操作的，但是有时候是只想告知用户”这个地方是可以进行勾选操作的”而不想让用户在此处勾选（比如在信息展示页面），这时候就需要将复选框设置成只读的效果。 提到只读，很容易想到使用readonly属性，但是对于复选框来说，这个属性和期望得到的效果是有差别的。原因在于readonly属性关联的是页面元素的value属性（例如textbox，设置了readonly就不能修改输入框的文本内容），而复选框的勾选/取消并不改变其value属性，改变的只是一个checked状态。所以对于checkbox来说，设置了reado
改变checkbox默认选中状态及取值的实现代码
09-02
其中，2级`checkbox`通过`checked="checked"`属性被设置为默认选中状态： ```html <input type="checkbox" name="chk" value="1" val="1级">1级 <input type="checkbox" name="chk" value="2" checked="checked" ...
Element UI checkBox只读
Tiny2017的博客
09-11 5541
需求是希望用复选框的的形式展示数据，所以希望是只读模式 结果图： 思路：一开始希望是可选模式的蓝色，然后不可修改，如下图 然后百度到这些方式，但是没试 最后看到一个评论突然意识到，不应该与用户习惯相悖。因为正常思维下蓝色展示是可选的 但是disable的选中框十分不明显，所以参考评论，将模式改为disable之后，更改一下checkBox的前景色 >>>.el-ch...
checkbox复选框indeterminate和checkAll控制选中、未选中和部分选中的状态转换
最新发布
u010234868的专栏
05-22 264
indeterminate为false，checkAll为false的时候，状态为未选中。indeterminate为true，checkAll为false的时候，状态为半选中。indeterminate为false，checkAll为true的时候，状态为全选中。
设置checkbox复选框为readonly只读的两种方式
多一点点的专栏
07-15 1665
很多时候，我们需要设置checkbox复选框中的选项为只读模式。 下面为大家介绍二种方法。 例1，由于checkbox无readOnly属性，使用disabled=“disabled”属性，只会让checkbox变成灰色。 使用如下的方式，可以让checkbox保持只读，例如： onclick="return false" 用js代码表示，就是这样： checkbox.onclick=fu
element表单-渲染接口返回checkbox默认值后不能被修改状态
Amen的博客
07-13 717
问题代码： this.$set(this,'addressForm',value); this.addressForm.defaultCheck=!(!value.defaultCheck); 解决： this.addressForm = { ...value, defaultCheck: !(!value.defaultCheck) } ...
vue + element-ui项目，el-checkbox上的响应式问题——数据变化后勾选状态未变化
Annie的博客
07-15 8087
Vue 为了尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。若要两个元素完全独立，不要复用，添加具有唯一值的key即可。
让checkbox不选中即将选中的checkbox不选中
09-04
在某些场景下，我们可能需要实现这样的功能：当用户尝试选中一个已经被选中的复选框时，该复选框不会被再次选中，即保持非选中状态。这个功能在某些特定的应用中，如防止重复选择或者实现反选效果，非常有用。以下将...
vue .js绑定checkbox并获取、改变选中状态的实例
10-18
在Vue.js中，绑定checkbox并获取、改变其选中状态是常见的需求。本文将通过一个实例来详细介绍这个过程，并探讨如何处理复选框选中的值问题。 首先，让我们看下HTML部分的代码： ```html ...
用JS修改checkbox的选中状态
03-01
在JavaScript（JS）中，操作HTML元素，包括修改checkbox（复选框）的选中状态，是前端开发中常见的任务。复选框是用户界面中一种允许用户进行多项选择的控件，其状态通常有两种：选中（checked）和未选中。在本文中...
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
10-26
一、改变radio/checkbox选中状态 在HTML中，`<input type="radio">` 和 `<input type="checkbox">` 分别用于创建单选按钮和复选框。在jQuery中，我们可以通过`.attr()`方法来改变它们的`checked`属性，从而改变其...
elementui el-checkbox改变其选中状态后，样式没有变化，不显示勾选
m0_52860590的博客
01-11 1409
可以给绑定的数组赋值一个新数组。
Elementui在el-table自定义头部中使用el-checkbox导致el-checkbox点击不改变视图
L1515115的博客
02-13 1464
Elementui 中el-table 自定义头部中使用 el-checkbox 以至于el-checkbox 不更新视图的问题
element el-checkbox 选中后无法改变状态
u014788505的博客
11-25 2379
//dom: <el-checkbox-group v-model="checkList" > <!-- $event读取自带事件 --> <el-checkbox v-for="item in roleList" :label="item.roleName" :key="item.id" @change="roleChange($event,item)" ></el-checkbox> </e.
element的el-checkbox点击不刷新
李恒道的博客
01-24 2647
转载自油猴中文网：bbs.tampermonkey.net.cn 李恒道QQ4548212 油猴中文网bbs.tampermonkey.net.cn TamperMonkey GreaseMonkey 油猴脚本 脚本交流 脚本分享 油猴脚本开发 油猴基础开发 油猴 油猴中文 公众号:叛逆青年旅舍 https://bbs.tampermonkey.net.cn/ 开发的过程中发现el-checkbox点击不刷新，但是调试输出值有相应的改变 发现动态添加的选择属性没有set和get 查询资料发现在实例创
阻止Checkbox事件冒泡（uniapp）
peachban的博客
11-28 990
父元素为一个卡片，点击卡片会跳转到新的详情页。复选框（使用checkbox组件）在卡片内部的左侧，点击多选框可以多选删除卡片。直接在checkbox上直接加@click.stop是不生效的，事件冒泡还是存在。用一个容器包裹住复选框，在父元素上添加。修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。在点击复选框时间，会触发父元素的点击事件，直接跳转。使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。只会阻止对元素自身的点击。会阻止所有的点击，而。
kml文件转成cvs_Google Earth KML数据格式转换成Shp数据格式
weixin_39545310的博客
12-18 370
Google Earth KML数据格式转换成Shp数据格式1 打开Google Earth ，用工具条可以绘制点线面，比如画一条道路面：点击OK结束画图操作2 保存为KMZ或KML文件格式File—Save—Save Place As3 利用ArcGis的Data Interoperability Tools工具进行Kml到shp格式的转换Data Interoperability Tools是...
Element UI中el-table组件type=selection时CheckBox禁止选择
lee_uncle的博客
04-11 1033
Element UI中el-table组件type=selection时CheckBox禁止选择。
vue 修改checkbox选中状态
05-10
vue在处理checkbox选中状态时，可以通过v-model绑定一个Boolean类型的数据，选中时该数据值为true，未选中时为false。当checkbox被选中或取消选中时，v-model绑定的值会自动更新。同时，还可以使用v-bind绑定checked属性来实现对checkbox的选中状态进行控制。 例如，我们可以在checkbox上添加一个v-model绑定的checkedList数组，表示选中的项目： ``` <template> <div> <label v-for="(item, index) in list" :key="index"> <input type="checkbox" :value="item" v-model="checkedList">{{item}} </label> </div> </template> <script> export default { data() { return { list: ['apple', 'banana', 'orange'], checkedList: [] } } } </script> ``` 在上面的代码中，我们使用了v-for指令来遍历list数组，将每个元素显示为一个checkbox，并绑定了选中状态到checkedList数组中。当选中某个checkbox时，它的值会被添加到checkedList数组中，取消选中则从数组中移除。 除了v-model外，我们还可以使用v-bind绑定checked属性，对checkbox的选中状态进行控制。例如，我们可以在checkbox上添加一个计算属性isChecked，用于决定是否选中该项： ``` <template> <div> <label v-for="(item, index) in list" :key="index"> <input type="checkbox" :value="item" :checked="isChecked(item)" @change="toggleChecked">{{item}} </label> </div> </template> <script> export default { data() { return { list: ['apple', 'banana', 'orange'], checkedList: [] } }, computed: { isChecked() { return (item) => { return this.checkedList.indexOf(item) > -1 } } }, methods: { toggleChecked(event) { const item = event.target.value const index = this.checkedList.indexOf(item) if (index > -1) { this.checkedList.splice(index, 1) } else { this.checkedList.push(item) } } } } </script> ``` 在上面的代码中，我们定义了一个计算属性isChecked，返回一个匿名函数，该函数接收一个item参数，用于判断是否选中该项。在checkbox的checked属性上绑定了isChecked计算属性，当该函数返回true时，checkbox会被选中。 同时，我们在@change事件上监听checkbox的状态变化，并在toggleChecked方法中更新checkedList数组。当选中某个checkbox时，它的值会被添加到checkedList数组中，取消选中则从数组中移除。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值