vue2.0结合Element实现select动态控制input禁用
今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得为什么不直接把input设置成禁用的而要用动态的,选一次select禁用一次input,也就是说,input只有在select是没有点击过的时候是可编辑的,但凡我改变一次select的值,input就要被设置成禁用,其实没有必要,因为第一次设置成禁用后面已经不能再改变input的值了,不过当时小颖也不会,折腾了半天,最终在刚刚解决了那个问题。
我们先一起来看看效果图:
小颖就不配置环境了,小颖当时在试的时候是用Element官网中的Form 表单环境试验的大家一起来看代码吧:
html:
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.2/lib/index.js"></script>
<div id="app">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="审批人">
<el-input v-bind:disabled="disabledInput" v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formInline.region" @change="inputToDisabled" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item><el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
js:
var Main = {
data() {
return {
formInline: {
user: '',
region: ''
},
disabledInput:false
}
},
methods: {
onSubmit() {
console.log('submit!');
},
inputToDisabled(){
this.disabledInput=true;
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
css:
@import url("//unpkg.com/element-ui@1.3.2/lib/theme-default/index.css");
大家要是想看运行的代码可以移步至:Element官网中的Form 表单环境大家可以在哪里将代码运行起来看下效果到底是怎样的嘻嘻。
下面小颖在给大家分享下用JavaScript和jquery怎么实现上面的效果,小颖就简单的给大家做个demo就不写漂亮的样式了嘻嘻。好吧其实我是懒得不想写哈哈哈
1.JavaScript实现动态将input设成disabled,可以用id、class实现。
id:
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function inputToDisabled() {
document.getElementById("disabledInput").disabled = true;
}
</script>
</head> <body>
<div class="">
<input type="text" class="disabled_input" id="disabledInput">
<button type="button" name="button" onclick="inputToDisabled()">禁用input</button>
</div>
</body> </html>
class:
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function inputToDisabled() {
document.getElementsByClassName("disabled_input")[0].disabled = true;
</script>
</head> <body>
<div class="">
<input type="text" class="disabled_input" id="disabledInput">
<button type="button" name="button" onclick="inputToDisabled()">禁用input</button>
</div>
</body> </html>
2.jquery实现动态将input设成disabled,可以用id、class实现。
id:
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#disabledInputBtn").click(function(){
$("#disabledInput").attr("disabled", true);
});
})
</script>
</head> <body>
<div class="">
<input type="text" class="disabled_input" id="disabledInput">
<button type="button" name="button" id="disabledInputBtn" onclick="inputToDisabled()">禁用input</button>
</div>
</body> </html>
class:
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#disabledInputBtn").click(function(){
$(".disabled_input").attr("disabled", true);
});
})
</script>
</head> <body>
<div class="">
<input type="text" class="disabled_input" id="disabledInput">
<button type="button" name="button" id="disabledInputBtn" onclick="inputToDisabled()">禁用input</button>
</div>
</body> </html>
vue2.0结合Element实现select动态控制input禁用的更多相关文章
- vue2.0之element table的使用
说明: 1.改变表头居中问题: 需要在el-table-column中添加 header-align="center" <el-table :data="t ...
- Vue2.0+Webpack+Element+Axios+vueRouter技术栈使用过程总结
搭建项目架构 目采用Webpack+Vue-router的架构方式,开始安装(一切操作都在windows系统上完成) 1.按Win+R,然后在文本框中输入cmd,回车打开命令行,输入vue-cli安装 ...
- vue2.0实现页面刷新时某个input获得focus
通过自定义指令:
- html一个页面链接携带参数跳转另一个页面基于vue2.0的element框架
来给生活比个耶! 1.按钮 <el-button @click="albumList(scope.row.id)" size="mini" type=&q ...
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...
- vue2.0+element+node+webpack搭建的一个简单的后台管理界面
闲聊: 今天是六一儿童节哟,小颖祝大家节日快乐哈哈哈.其实这个demo小颖断断续续做了将近两个礼拜了,心塞的,其实这个也没有多难,主要是小颖有点最近事情有点多,所以就把这个一直拖着,今天好不容易做好了 ...
- vue2.0 element学习
1,bootstrap和vue2.0结合使用 vue文件搭建好后,引入jquery和bootstrap 我采用的方式为外部引用 在main.js内部直接导入 用vue-cli直接安装jquery和bo ...
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- 饿了么基于Vue2.0的通用组件开发之路(分享会记录)
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
随机推荐
- iOS开发之UITabBarController
1.概述 跟UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型例子就是QQ.微信等应用. 2.UITabB ...
- UIImageView帧动画相关属性和方法
@property(nonatomic,copy) NSArray *animationImages; 需要播放的序列帧图片数组(里面都是UIImage对象,会按顺序显示里面的图片) @propert ...
- 这是对position讲解最通俗易懂的版本了。
position 为了制作更多复杂的布局,我们需要讨论下 position 属性.它有一大堆的值,名字还都特抽象,别提有多难记了.让我们先一个个的过一遍,不过你最好还是把这页放到书签里. static ...
- JavaEE开发之Spring中Bean的作用域、Init和Destroy方法以及Spring-EL表达式
上篇博客我们聊了<JavaEE开发之Spring中的依赖注入以及AOP>,本篇博客我们就来聊一下Spring框架中的Bean的作用域以及Bean的Init和Destroy方法,然后在聊一下 ...
- 如何使用LightningChart拖放功能进行数据转移 ?
本文主要介绍如何使用LightningChart扩展拖放功能为所有图表组件创建图表,如:系列,标题,轴线等等.支持用鼠标放置自定义对象到另一个图表中,如:可以添加或修改JSON/CSV或其他格式的数据 ...
- 老李推荐:第14章7节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-装备ViewServer-获取版本号 2
代码先是发送”LIST”命令到ViewServer列出所有的打开的窗口,然后把每个窗口都保存起来.342行起按照源码的注释解析就是说:从协议版本3以后开始加入了窗口自动更新的功能,但是在此之前,如果用 ...
- 在hive中直接对timestamp类型取max报错
之前直接对timestamp类型做max操作, select id,max(updatetime) updatetime from his.tag group by id; 结果查询的结果有的显示为1 ...
- 浅谈css中单位px和em,rem的区别-转载
px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div ...
- DataReader和DataSet区别
可以使用DataReader类的对象或DataSet类的对象从数据库读取数据,但它们是有区别的,归纳起来大致有以下几条: 1. DataReader是数据管理提供者类,而DataSet是一 ...
- [USACO11NOV]牛的障碍Cow Steeplechase
洛谷传送门 题目描述: 给出N平行于坐标轴的线段,要你选出尽量多的线段使得这些线段两两没有交点(顶点也算),横的与横的,竖的与竖的线段之间保证没有交点,输出最多能选出多少条线段. 因为横的与横的,竖的 ...