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

Posted 2020-09-17 爱喝酸奶的吃货

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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：

<!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>

以上是关于vue2.0结合Element实现select动态控制input禁用的主要内容，如果未能解决你的问题，请参考以下文章

element + vue2.0 开发动态表单录入组件02

vue2.0 实现click点击当前li，动态切换class

element-ui中el-select与el-tree的结合使用实现下拉菜单