vue2.0結合Element實現select動態控制input禁用
阿新 • • 發佈：2017-05-12
嘻嘻 [0 attr 折騰 解決 model utf del logs
今天有一個盆友問小穎，怎麽實現用select動態控制input禁用，也就是說，input默認是可編輯的，但是每當我選一次select，input就會變成禁用，雖然小穎不知道她為什麽這樣做，因為小穎覺得為什麽不直接把input設置成禁用的而要用動態的，選一次select禁用一次input，也就是說，input只有在select是沒有點擊過的時候是可編輯的，但凡我改變一次select的值，input就要被設置成禁用，其實沒有必要，因為第一次設置成禁用後面已經不能再改變input的值了，不過當時小穎也不會，折騰了半天，最終在剛剛解決了那個問題。
我們先一起來看看效果圖：
小穎就不配置環境了，小穎當時在試的時候是用Element官網中的Form 表單環境試驗的大家一起來看代碼吧：
html：
1 <script src="//unpkg.com/vue/dist/vue.js"></script> 2 <script src="[email protected]/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("[email protected]/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>
vue2.0結合Element實現select動態控制input禁用