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

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

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

        

     小颖就不配置环境了，小颖当时在试的时候是用Element官网中的Form 表单环境试验的大家一起来看代码吧：

html：

复制代码
 1 <script src="//unpkg.com/vue/dist/vue.js"></script>
 2 <script src="//unpkg.com/element-ui@1.3.2/lib/index.js"></script>
 3 <div id="app">
 4 <el-form :inline="true" :model="formInline" class="demo-form-inline">
 5   <el-form-item label="审批人">
 6     <el-input v-bind:disabled="disabledInput" v-model="formInline.user" placeholder="审批人"></el-input>
 7   </el-form-item>
 8   <el-form-item label="活动区域">
 9     <el-select v-model="formInline.region" @change="inputToDisabled" placeholder="活动区域">
10       <el-option label="区域一" value="shanghai"></el-option>
11       <el-option label="区域二" value="beijing"></el-option>
12     </el-select>
13   </el-form-item><el-form-item>
14     <el-button type="primary" @click="onSubmit">查询</el-button>
15   </el-form-item>
16 </el-form>
17 </div>
复制代码

js：

复制代码
 1 var Main = {
 2     data() {
 3       return {
 4         formInline: {
 5           user: '',
 6           region: ''
 7         },
 8         disabledInput:false
 9       }
10     },
11     methods: {
12       onSubmit() {
13         console.log('submit!');
14       },
15       inputToDisabled(){
16           this.disabledInput=true;
17       }
18     }
19   }
20 var Ctor = Vue.extend(Main)
21 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：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>

 

posted @   爱喝酸奶的吃货  阅读(22599)  评论(3)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
点击右上角即可分享
微信分享提示