vue2.0结合Element实现select动态控制input禁用实例


Posted in Javascript onMay 12, 2017

今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得为什么不直接把input设置成禁用的而要用动态的,选一次select禁用一次input,也就是说,input只有在select是没有点击过的时候是可编辑的,但凡我改变一次select的值,input就要被设置成禁用,其实没有必要,因为第一次设置成禁用后面已经不能再改变input的值了,不过当时小颖也不会,折腾了半天,最终在刚刚解决了那个问题。

我们先一起来看看效果图:

vue2.0结合Element实现select动态控制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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
Preload基础使用方法详解
Feb 03 Javascript
详解微信小程序 相对定位和绝对定位
May 11 #Javascript
Vue通过input筛选数据
Oct 26 #Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 #Javascript
jQuery遮罩层实例讲解
May 11 #jQuery
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 #Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 #Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 #Javascript
You might like
图象函数中的中文显示
2006/10/09 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
replace()方法查找字符使用示例
2013/10/28 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
详解Python的循环结构知识点
2019/05/20 Python
python实现桌面气泡提示功能
2019/07/29 Python
python实现微信打飞机游戏
2020/03/24 Python
python speech模块的使用方法
2020/09/09 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
《桂花雨》教学反思
2014/04/12 职场文书
企业形象策划方案
2014/05/29 职场文书
文明工地标语
2014/06/16 职场文书
2014年党建工作总结
2014/11/11 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js