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

2019-11-19 16:35:59

字体：大中小

来源：转载

供稿：网友

今天有一个盆友问小颖，怎么实现用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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：WebSocket实现简单客服聊天系统

下一篇：详解微信小程序相对定位和绝对定位