我的 頁面原始碼如下:
<div id=”WebContent”>
<table style="width:100%;">
<tr>
<td width="10%"><label>代號</label></td>
<td><input id="Id_TEXT" type="text" /></td>
</tr>
<tr>
<td><label>名稱</label></td>
<td><input id="Name_TEXT" type="text" /></td>
</tr>
<tr>
<td><label>啟用/停用</label></td>
<td>
<input type="radio" name="Availa" id="Enable_RADIO" value="Enable" />
<label for="radio">啟用</label>
<input type="radio" name="Availa" id="Disable_RADIO" value="Disable" />
<label for="radio">停用</label>
</td>
</tr>
<tr>
<td><label>備註</label></td>
<td>
<textarea name="textarea" id="Memo_TEXTAREA" cols="45" rows="5"></textarea>
</td>
</tr>
</table>
</div>
請問如透過 jQuery 一次設定 id 分別為 Id_TEXT、Name_TEXT、Enable_RADIO、Disable_RADIO以及Memo_TEXTAREA 這幾個控制項 唯讀 呢?
我的想法是說能不能透過 jquery 選擇器搭配子元素的方式做到一行就能控制同一個頁面上多個控制項呈現唯讀狀態?
這樣:
<pre class="c" name="code">
$(":input").prop("disabled", true);
如果你只想要 disable 特定的幾個, 就用 class 選擇器
範例: http://jsfiddle.net/ASb4F/1/
<pre class="c" name="code">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
$(function(){
var ctrl = ['Id_TEXT','Name_TEXT','Enable_RADIO','Disable_RADIO','Memo_TEXTAREA'];
for(var i = 0; i< ctrl.length; i++)
{
SetReadOnly(ctrl[i], true);
}
function SetReadOnly(i, torf)
{
$('#'+i+'').prop('readonly', true);
}
});
</script>
<div id=”WebContent”>
<table style="width:100%;">
<tr>
<td width="10%"><label>代號</label></td>
<td><input id="Id_TEXT" type="text" /></td>
</tr>
<tr>
<td><label>名稱</label></td>
<td><input id="Name_TEXT" type="text" /></td>
</tr>
<tr>
<td><label>啟用/停用</label></td>
<td>
<input type="radio" name="Availa" id="Enable_RADIO" value="Enable" />
<label for="radio">啟用</label>
<input type="radio" name="Availa" id="Disable_RADIO" value="Disable" />
<label for="radio">停用</label>
</td>
</tr>
<tr>
<td><label>備註</label></td>
<td>
<textarea name="textarea" id="Memo_TEXTAREA" cols="45" rows="5"></textarea>
</td>
</tr>
</table>
</div>