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

如果各位熟悉 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

<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：
$('.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：
$('.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

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

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

也許您對這些文章也有興趣

發表迴響取消回覆

也許您對這些文章也有興趣

發表迴響 取消回覆

發表迴響取消回覆