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 的一些心得. 官网 ...
随机推荐
- VisualVM监控远程主机上的JAVA应用程序
使用VisualVM监控远程主机上JAVA应用程序时,需要开启远程主机上的远程监控访问,或者在远程JAVA应用程序启动时,开启远程监控选项,两种方法,选择其中一种就可以开启远程监控功能,配置完成后就可 ...
- oracle server config
安装oracle数据库软件 database/runInstaller; ##执行该程序开始安装 创建数据库 在oracle用户的图形界面oracle用户中 新开启一个终端,直接输入命令dbca会弹出 ...
- java Servlet接口及应用(转)
基本类和接口 一.javax.servlet.Servlet接口 servlet抽象集是javax.servlet.Servlet接口,它规定了必须由Servlet类实现由servlet引擎识别和管理 ...
- 【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础
一.字符串的操作 1.转大写: s.toLowerCase(); 2.转大写: s.toUpperCase(); 3.字符串的截取: s.substr(3,4); -从索引3开始截取,截取4 ...
- Lombok : 让你写 Java代码像C#一样爽
前言 我曾经是一名 .Net 开发,如今的我是一名 Java 开发者.在我享受着 Java 成熟的生态时,我常常怀念 c# 简洁的语法:自动属性.类型推断.自动初始化器 .... 鱼,我所欲也,熊掌亦 ...
- Nodejs安装后修改全局路径配置
--以Windows平台为例,类Unix平台操作方式相同 1. 新建保存node_modules的文件夹,例如我的路径为:D:\NodeJS Lib\npm 2. 在DOS窗口输入以下代码,把缓存及储 ...
- Eclipse中Maven插件部分常用功能命令介绍
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6689010.html Eclipse中安装Maven插件之后,就能很方便的管理Maven项 ...
- Win7+CentOS双系统(二)
在之前的文章中我们实现了Win7+CentOS6.3双系统的安装和使用,不过比较不幸的是在CentOS6.4版本时其安装文件大小已经超过了FAT文件系统所能容纳的单个文件大小4G.我们使用FAT文件系 ...
- 20分钟快速了解Redis
Redis可以说是目前最火爆的NoSQL数据库! 过去几年,Memcached很盛行,现在有很多公司已将Memcached替换成了Redis.当然,很多人替换并不清楚为什么,只是感觉不想让主流抛弃,这 ...
- jquery如何设置html众标签中的值
$("img").attr("src",some_url);//jquery设置img标签中的src值 $("#user").val(&qu ...