vue2.0結合Element實現(xiàn)select動態(tài)控制input禁用實例
今天有一個盆友問小穎,怎么實現(xiàn)用select動態(tài)控制input禁用,也就是說,input默認是可編輯的,但是每當我選一次select,input就會變成禁用,雖然小穎不知道她為什么這樣做,因為小穎覺得為什么不直接把input設置成禁用的而要用動態(tài)的,選一次select禁用一次input,也就是說,input只有在select是沒有點擊過的時候是可編輯的,但凡我改變一次select的值,input就要被設置成禁用,其實沒有必要,因為第一次設置成禁用后面已經不能再改變input的值了,不過當時小穎也不會,折騰了半天,最終在剛剛解決了那個問題。
我們先一起來看看效果圖:
就不配置環(huán)境了,小穎當時在試的時候是用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設成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設成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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關于Vue.js常用指令之循環(huán)使用v-for指令的相關資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-06-06