脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue控制input禁用

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

 更新时间：2017年05月12日 08:17:57   作者：爱喝酸奶的吃货  
本篇文章主要介绍了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>

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

您可能感兴趣的文章:

相关文章

  • 解读vue生成的文件目录结构及说明

    解读vue生成的文件目录结构及说明

    本篇文章主要介绍了解读vue生成的文件目录结构及说明，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue3动态修改打包后的请求路径的操作代码

    vue3动态修改打包后的请求路径的操作代码

    这篇文章主要介绍了vue3动态修改打包后的请求路径,需要我们创建一个静态资源里的外部文件来实现，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-09-09
  • Vue3+Vite项目使用less的实现步骤

    Vue3+Vite项目使用less的实现步骤

    最近学习在vite项目中配置less,本文主要介绍了Vue3+Vite项目使用less的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-02-02
  • vue的keep-alive中使用EventBus的方法

    vue的keep-alive中使用EventBus的方法

    keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。这篇文章主要介绍了vue的keep-alive中使用EventBus的方法,需要的朋友可以参考下
    2019-04-04
  • vue组件数据传递、父子组件数据获取，slot,router路由功能示例

    vue组件数据传递、父子组件数据获取，slot,router路由功能示例

    这篇文章主要介绍了vue组件数据传递、父子组件数据获取，slot,router路由功能,结合实例形式分析了vue.js组件数据传递、路由相关概念、原理及相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • 解决vue-loader加载不上的问题

    解决vue-loader加载不上的问题

    这篇文章主要介绍了解决vue-loader加载不上的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue.js状态管理之Pinia与Vuex详解

    Vue.js状态管理之Pinia与Vuex详解

    Pinia和Vuex一样都是是vue的全局状态管理器,其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了名字Pinia,下面这篇文章主要给大家介绍了关于Vue.js状态管理之Pinia与Vuex的相关资料,需要的朋友可以参考下
    2023-02-02
  • 浅谈实现vue2.0响应式的基本思路

    浅谈实现vue2.0响应式的基本思路

    这篇文章主要介绍了浅谈实现vue2.0响应式的基本思路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Vue.js实现拖放效果的实例

    Vue.js实现拖放效果的实例

    这篇文章主要介绍了Vue.js实现拖放效果的实例的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • vue3插件json2ts的具体使用

    vue3插件json2ts的具体使用

    本文主要介绍了vue3插件json2ts的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论