vue2.0結(jié)合Element實現(xiàn)select動態(tài)控制input禁用實例

更新時間：2017年05月12日 08:17:57 作者：愛喝酸奶的吃貨

本篇文章主要介紹了vue2.0結(jié)合Element實現(xiàn)select動態(tài)控制input禁用實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

今天有一個盆友問小穎，怎么實現(xiàn)用select動態(tài)控制input禁用，也就是說，input默認(rèn)是可編輯的，但是每當(dāng)我選一次select，input就會變成禁用，雖然小穎不知道她為什么這樣做，因為小穎覺得為什么不直接把input設(shè)置成禁用的而要用動態(tài)的，選一次select禁用一次input，也就是說，input只有在select是沒有點擊過的時候是可編輯的，但凡我改變一次select的值，input就要被設(shè)置成禁用，其實沒有必要，因為第一次設(shè)置成禁用后面已經(jīng)不能再改變input的值了，不過當(dāng)時小穎也不會，折騰了半天，最終在剛剛解決了那個問題。

我們先一起來看看效果圖：

就不配置環(huán)境了，小穎當(dāng)時在試的時候是用Element官網(wǎng)中的Form 表單環(huán)境試驗的大家一起來看代碼吧：

html：

<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://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="活動區(qū)域">
  <el-select v-model="formInline.region" @change="inputToDisabled" placeholder="活動區(qū)域">
   <el-option label="區(qū)域一" value="shanghai"></el-option>
   <el-option label="區(qū)域二" 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官網(wǎng)中的Form 表單環(huán)境大家可以在哪里將代碼運行起來看下效果到底是怎樣的嘻嘻。

下面小穎在給大家分享下用JavaScript和jquery怎么實現(xiàn)上面的效果，小穎就簡單的給大家做個demo就不寫漂亮的樣式了嘻嘻。好吧其實我是懶得不想寫哈哈哈

1.JavaScript實現(xiàn)動態(tài)將input設(shè)成disabled，可以用id、class實現(xiàn)。

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實現(xiàn)動態(tài)將input設(shè)成disabled，可以用id、class實現(xiàn)。

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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: