Javascript disabled 改變表單欄位範例
<script language="javascript">
function ChangeDisabled(value){
if(value=='1'){
document.getElementById('TetstText').disabled=false; // 變更欄位為可用
}else{
document.getElementById('TetstText').disabled=true; // 變更欄位為禁用
}
}
</script>
<input type="text" id="TetstText">
<input type="button" value='變更欄位為可用' onclick="ChangeDisabled(1)">
<input type="button" value='變更欄位為禁用' onclick="ChangeDisabled(2)">
呈現結果如function ChangeDisabled(value){
if(value=='1'){
document.getElementById('TetstText').disabled=false; // 變更欄位為可用
}else{
document.getElementById('TetstText').disabled=true; // 變更欄位為禁用
}
}
</script>
<input type="text" id="TetstText">
<input type="button" value='變更欄位為可用' onclick="ChangeDisabled(1)">
<input type="button" value='變更欄位為禁用' onclick="ChangeDisabled(2)">
此範例的 text 欄位預設是可以填入資料,但是我們加上了兩個按鈕,用來控制欄位的 disabled 值,網頁剛開啟的時候,第一個變更欄位為可用的按鈕不會有反應,而變更欄位為禁用的按鈕就會馬上把 text 欄位盡用掉了,無法輸入文字。
JavaScript function 中的 document.getElementById('TetstText').disabled 即是用來改變 disabled 屬性的語法,false 代表 disabled 失效,也就是欄位可用,反之 true 是讓欄位的 disabled 變成有效,來達成盡用效果。
延伸閱讀
HTML button 按鈕
HTML button disabled 按鈕的禁用語法
JavaScript document.write( ) 方法