大家好,等会我说的大家可能都已经遇到过了,也或许没有遇到过,再或许没有从这方面考虑过.接下来我们通过一个小例子来说明一下。
我们在每个项目中,几乎都会用到[checkbox]组件。比如批量删除,批量审核等等...,举个简单的例子,如下图:
这是一个简单的批量删除演示,大家可以看到其中"李四"和"刘六"二人是禁止删除的,因为其对应的checkbox组件是禁用的。此我们稍微考虑一下,我们能否在浏览器端将李四对应的checkbox修改成可用。如果能那显然就破坏了正常的业务逻辑和系统的安全性,当然有人会说我会在后台验证,对没错!但我们今天只是拿来讨论一下前台的东西*^_^*
大家肯定都晓得可用在地址栏直接运行js代码,不过大家有想过通过在地址栏运行的js代码来改变页面中某些组件的状态或者value吗?
我们先看一下对应上面那个批量删除的HTML代码:
xml 代码
- a href="#">添加a> <a href="#">删除a>
- <hr size="1" width="100%">
- <input id="isDel" type="checkbox" value="张三"> 张三 男 石家庄 本科<br>
- <input id="isDel" type="checkbox" value="李四" disabled="disabled"> 李四 女 太原市 专科<br>
- <input id="isDel" type="checkbox" value="王五"> 王五 女 北京市 硕士<br>
- <input id="isDel" type="checkbox" value="刘六" disabled="disabled"> 刘六 男 石家庄 博士<br>
我们可用看到checkbox的id为[isDel],此时我便可用通过id在地址栏得到该对象。比如我们使用document.all.isDel来得到的是一个数组,包含了上面四个checkbox,同样我们也可以得到具体的某个checkbox。比如document.all.isDel[1],用这句代码来得到对应李四的checkbox,因为数组下标是从零开始的。如图:
我们在得到该对象之后想再修改其状态或修改它的value就易如反掌,我们只需运行alert(document.all.isDel[1].disabled="") ;就可用将李四的禁止删除状态改为可用删除状态,如图:
这样看来李四就可用删除了,当然,前提是你后台的验证不是很完善的情况下,所以这也对我们的后台验证提出了更高的要求。这里说明一下在地址栏运行javascript的时候一定使用alert语句,呵呵,如果不使用的话可用自己试一下效果。
写这篇短文也没有别的意思,就是想和大家讨论交流一下类似的问题,像这种情况举一反三可用落实到很多具体的场景,也不仅仅局限于checkbox这种组件。如果有业内的大牛对这方面有研究那就和我们分享一下吧。
谢谢您耐心看完此文。
分享到:
相关推荐
浅谈javascript面向对象编程,不错的材料
浅谈JavaScript编程语言的编码规范
JavaScript气象业务系统源码,根据需求完善对应的功能,做到尽可能的覆盖气象业务的需求。 JavaScript气象业务系统源码,根据需求完善对应的功能,做到尽可能的覆盖气象业务的需求。JavaScript气象业务系统源码,...
浅谈Angular的12个经典问题 目录 1. 请解释Angular 2应用程序的生命周期hooks是什么?2. 使用Angular 2,和使用Angular 1相比,有什么优势?3. Angular 2中的路由工作原理是什么?4. 什么是事件发射器?它是如何...
浅谈JavaScript对象之教学.pdf
浅谈JavaScript 标准对象_.docx
浅谈react useEffect闭包的坑 问题代码 看一段因为useEffect导致的闭包问题代码 const btn = useRef(); const [v, setV] = useState(''); useEffect(() => { let clickHandle = () => { console.log('v:',...
浅谈vue 移动端完美适配方案 前言:根据最近做的一个医疗手机端项目总结在移动端,vue怎么在不同屏幕上做根据不同屏幕大小适配 1、适配方案 在本项目中我所使用的vue移动方案是使用amfe-flexible 和 postcss-...
浅谈React双向数据绑定原理 目录 什么是双向数据绑定实现双向数据绑定数据影响视图视图影响数据 什么是双向数据绑定 实现双向数据绑定 数据影响视图视图影响数据 数据影响视图 视图影响数据 如果已经学过...
cookie,简单的理解。就是存储数据。通过cookie,数据可以长期保存,不随着浏览器的关闭而消失。 本文有助于初学者加深对cookie的理解,个人总结,不足之处欢迎随时交流。
数据库大作业-基于JavaScript银行业务管理系统源码.zip数据库大作业-基于JavaScript银行业务管理系统源码.zip数据库大作业-基于JavaScript银行业务管理系统源码.zip数据库大作业-基于JavaScript银行业务管理系统源码...
浅谈element的$notify注意点 我的初衷是把element-ui的$notify通知封装成一个组件,登录成功后调用获取低库存接口,如果获取接口的列表当中库存大于0,则显示这个通知,并且在文本当中提供点击事件。 因此,首先...
浅谈JavaScript对象与继承_.docx
浅谈JavaScript for循环 闭包_.docx
浅谈关于JavaScript脚本语言的学习.pdf
浅谈如何循序渐进的学好JS 目录 概述1.清楚js的定位2.清晰的学习路线3.自律坚持4.多练多写5.从多角度去学习和领悟6.注意培养自信心7.多写学习总结8.构建专属知识导图 概述 1.清楚js的定位 2.清晰的学习路线 3...
深入浅出JavaScript源代码 深入浅出JavaScript源代码 图灵教材
浅谈Javascript数组(推举)_.docx
浅谈Javascript单线程和事件循环.doc
《深入浅出JavaScript》PDF版本下载