iT邦幫忙

0

如何透過 jQuery一次性的設定頁面上的控制項為唯讀?

我的 頁面原始碼如下:

<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 選擇器搭配子元素的方式做到一行就能控制同一個頁面上多個控制項呈現唯讀狀態?

8
weiclin
iT邦高手 4 級 ‧ 2014-07-11 11:43:19

這樣:

<pre class="c" name="code">
$(":input").prop("disabled", true);

如果你只想要 disable 特定的幾個, 就用 class 選擇器
範例: http://jsfiddle.net/ASb4F/1/

0
saintcharles
iT邦新手 4 級 ‧ 2014-07-12 22:52:12

剛剛寫的,也可以把開關按鈕改成用radio按鈕控制

http://jsfiddle.net/QAV9v/1/

0
bluesky1213
iT邦新手 3 級 ‧ 2014-07-16 14:32:05
<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>

我要發表回答

立即登入回答