Home » jQuery 技巧

[jQ]如何使用 jQuery 來啟用/停用元素?

如果各位熟悉 HTML 屬性的話,那麼應該有看過 disabled 屬性。只要在表單元素(ButtonInputOptgroupOptionSelectTextArea)的屬性中加入 disabled 屬性的話,該元素就會被停用了。

1
<input type="text" name="txt" class="form_ele" value="abgne.tw" disabled />

既然它是一個屬性的話,那麼我們就能使用 jQueryattr(key, value) 來變更 disabled 屬性值就可以了。

先準備好 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)。所以 HTMLdisabled 屬性也會寫成:

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 屬性也可以用同樣的方法來玩喔!

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

4 筆針對 [jQ]如何使用 jQuery 來啟用/停用元素? 的迴響

  1. 老師好,
    請問表單disable後,會submit不出去
    是要在submit被click的時候,先把所有的表單元素disable拿掉在執行送出嗎?

  2. 老師您好 請問一下

    若是要製作一個 BUTTON
    再選擇日期前 顯示 DISABLED
    選擇日期後 則可以按 
    是依照此類型 去寫嘛 ?
    謝謝

    • 是可以的, 但前題是要能取得該欄位的值, 看是要網頁載入時順便寫到網頁中還是使用 ajax!
      不過若能在網頁載入時取得該欄位的值的話, 那你也就能夠直接修改 HTML 來停/啟用了.

發表迴響