vue2.0結合Element實現select動態控制input禁用

時間 2019-11-19

標籤 vue2.0 vue 結合 element 實現 select 動態控制 input 禁用简体版

原文原文鏈接

今天有一個盆友問小穎，怎麼實現用select動態控制input禁用，也就是說，input默認是可編輯的，可是每當我選一次select，input就會變成禁用，雖然小穎不知道她爲何這樣作，由於小穎以爲爲何不直接把input設置成禁用的而要用動態的，選一次select禁用一次input，也就是說，input只有在select是沒有點擊過的時候是可編輯的，但凡我改變一次select的值，input就要被設置成禁用，其實沒有必要，由於第一次設置成禁用後面已經不能再改變input的值了，不過當時小穎也不會，折騰了半天，最終在剛剛解決了那個問題。javascript

咱們先一塊兒來看看效果圖：css

小穎就不配置環境了，小穎當時在試的時候是用Element官網中的Form 表單環境試驗的你們一塊兒來看代碼吧：html

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 表單環境你們能夠在哪裏將代碼運行起來看下效果究竟是怎樣的嘻嘻。vue

下面小穎在給你們分享下用JavaScript和jquery怎麼實現上面的效果，小穎就簡單的給你們作個demo就不寫漂亮的樣式了嘻嘻。好吧其實我是懶得不想寫哈哈哈java

1.JavaScript實現動態將input設成disabled，能夠用id、class實現。

id：jquery

<!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:element-ui

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

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。