今天有一個盆友問小穎，怎么實現用select動態控制input禁用，也就是說，input默認是可編輯的，但是每當我選一次select，input就會變成禁用，雖然小穎不知道她為什么這樣做，因為小穎覺得為什么不直接把input設置成禁用的而要用動態的，選一次select禁用一次input，也就是說，input只有在select是沒有點擊過的時候是可編輯的，但凡我改變一次select的值，input就要被設置成禁用，其實沒有必要，因為第一次設置成禁用后面已經不能再改變input的值了，不過當時小穎也不會，折騰了半天，最終在剛剛解決了那個問題。
我們先一起來看看效果圖：
就不配置環境了，小穎當時在試的時候是用Element官網中的Form 表單環境試驗的大家一起來看代碼吧：
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="活動區域"> <el-select v-model="formInline.region" @change="inputToDisabled" placeholder="活動區域"> <el-option label="區域一" value="shanghai"></el-option> <el-option label="區域二" 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官網中的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> 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
