Javascript disabled 改變表單欄位或按鈕屬性

HTML button 有個 disabled 屬性,用來禁用該按鈕的功能,而 disabled 這個屬性除了可以控制 button 按鈕之外,還可以控制其他攔位的使用功能,像是文字輸入框、選項按鈕或是下拉選單等項目,一般而言,可以預設網頁開啟時候的欄位狀態,例如一開始就是禁用,僅顯示表單欄位,或者預設就是可以填入資料,但是當網頁開啟後,要怎麼改變這個 disabled 屬性呢?透過 JavaScript 就可以做到。

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)">
呈現結果如


此範例的 text 欄位預設是可以填入資料,但是我們加上了兩個按鈕,用來控制欄位的 disabled 值,網頁剛開啟的時候,第一個變更欄位為可用的按鈕不會有反應,而變更欄位為禁用的按鈕就會馬上把 text 欄位盡用掉了,無法輸入文字。

JavaScript function 中的 document.getElementById('TetstText').disabled 即是用來改變 disabled 屬性的語法,false 代表 disabled 失效,也就是欄位可用,反之 true 是讓欄位的 disabled 變成有效,來達成盡用效果。

延伸閱讀
HTML button 按鈕
HTML button disabled 按鈕的禁用語法
JavaScript document.write( ) 方法
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012