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 text,radio,checkbox,select操作实现代码
Jul 09 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
javascript三种代码注释方法
Jun 02 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
使用Canvas绘制一个游戏人物属性图
Mar 25 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
PHP动态图像的创建
2006/10/09 PHP
php的控制语句
2006/10/09 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
python中pickle模块浅析
2020/12/29 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
经营目标管理责任书
2014/07/25 职场文书
死者家属慰问信
2015/03/24 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android