如果各位熟悉 HTML 屬性的話,那麼應該有看過 disabled 屬性。只要在表單元素(Button、Input、Optgroup、Option、Select 及 TextArea)的屬性中加入 disabled 屬性的話,該元素就會被停用了。
檢視原始碼 HTML
1 | <input type="text" name="txt" class="form_ele" value="abgne.tw" disabled /> |
既然它是一個屬性的話,那麼我們就能使用 jQuery 的 attr(key, value) 來變更 disabled 屬性值就可以了。
先準備好 HTML:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 | <body> <input type="button" value="disabled" id="disBtn" /> <input type="button" value="enabled" id="enBtn" /> <hr /> <input type="text" name="txt" class="form_ele" value="abgne.tw" /> <br /> <select name="sel" class="form_ele"> <option value="01">01</option> <option value="02">02</option> </select> </body> |
再來看要怎樣來停用元素:
檢視原始碼 JavaScript
1 2 3 4 5 | // 方法 1: $('.form_ele').attr('disabled', true); // 方法 2: $('.form_ele').attr('disabled', 'disabled'); |
要讓 disabled 屬性能啟用的話,它的值就需要為 true 才行。除了直接設成 true 之外,通常都會把它的值設成跟屬性同樣的字串(非空字串均表示為 true)。所以 HTML 的 disabled 屬性也會寫成:
檢視原始碼 HTML
1 | <input type="text" name="txt" class="form_ele" value="abgne.tw" disabled="disabled" /> |
已經知道設成 true 就能停用的話,那麼要啟用它就只要設成 false 就可以了:
檢視原始碼 JavaScript
1 2 3 4 5 | // 方法 1: $('.form_ele').attr('disabled', false); // 方法 2: $('.form_ele').attr('disabled', ''); |
除了設成 false 之外,只要把 disabled 屬性值設成空字串的話,也等同是設成 false。不過我們還可以利用 removeAttr(name) 的方式來移除 disabled 屬性:
檢視原始碼 JavaScript
1 2 | // 方法 3: $('.form_ele').removeAttr('disabled'); |
這三種方式都能達到同樣的效果,要使用那種就請各位自己選擇了!另外, readonly 屬性也可以用同樣的方法來玩喔!
老師好,
請問表單disable後,會submit不出去
是要在submit被click的時候,先把所有的表單元素disable拿掉在執行送出嗎?
老師您好 請問一下
若是要製作一個 BUTTON
再選擇日期前 顯示 DISABLED
選擇日期後 則可以按
是依照此類型 去寫嘛 ?
謝謝
老師您好 請問一下
假如要判斷 資料庫某個欄位數字大於0啟用按鈕,有方法嗎?
是可以的, 但前題是要能取得該欄位的值, 看是要網頁載入時順便寫到網頁中還是使用 ajax!
不過若能在網頁載入時取得該欄位的值的話, 那你也就能夠直接修改 HTML 來停/啟用了.