Home » jQuery 技巧

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

[ 日期： | 瀏覽：163,737 | 迴響：4 ]

如果各位熟悉 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 屬性也可以用同樣的方法來玩喔！

範例 1

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

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

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

  2. 老師您好　請問一下

    若是要製作一個　ＢＵＴＴＯＮ
    再選擇日期前　顯示　ＤＩＳＡＢＬＥＤ
    選擇日期後　則可以按　
    是依照此類型　去寫嘛　？
    謝謝

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

發表迴響