您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“vue2.0結(jié)合Element怎么實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue2.0結(jié)合Element怎么實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用”這篇文章吧。
我們先一起來(lái)看看效果圖:
就不配置環(huán)境了,小穎當(dāng)時(shí)在試的時(shí)候是用Element官網(wǎng)中的Form 表單環(huán)境試驗(yàn)的大家一起來(lái)看代碼吧:
html:
<script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//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="活動(dòng)區(qū)域"> <el-select v-model="formInline.region" @change="inputToDisabled" placeholder="活動(dòng)區(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">查詢(xún)</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);
大家要是想看運(yùn)行的代碼可以移步至:Element官網(wǎng)中的Form 表單環(huán)境大家可以在哪里將代碼運(yùn)行起來(lái)看下效果到底是怎樣的嘻嘻。
下面小穎在給大家分享下用JavaScript和jquery怎么實(shí)現(xiàn)上面的效果,小穎就簡(jiǎn)單的給大家做個(gè)demo就不寫(xiě)漂亮的樣式了嘻嘻。好吧其實(shí)我是懶得不想寫(xiě)哈哈哈
1.JavaScript實(shí)現(xiàn)動(dòng)態(tài)將input設(shè)成disabled,可以用id、class實(shí)現(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實(shí)現(xiàn)動(dòng)態(tài)將input設(shè)成disabled,可以用id、class實(shí)現(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>
以上是“vue2.0結(jié)合Element怎么實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。