JQuery Selector 使用實例分享

今天有個需求，功能如上圖，可讓User任意勾選所需項目，且後方可輸入所需數量。
額外希望可達到的功能需求如下：

1. 項目未勾選時，後方為不可輸入狀態，且預設值為0。
2. 項目勾選後，後方即改變狀態為可輸入，且數量預設為1。
3. 數量欄位只可輸入數字。
4. 如項目已被勾選，則數量不可為0。
5. 如項目已被勾選，則需求欄位不可為空。

上方輸入表單，使用ListView實作，實際aspx頁面如下：

<table id='ItemsTable'>  
  <asp:ListView ID="ListView2" runat="server">  
    <ItemTemplate>  
      <tr>  
        <td valign="top">  
          <asp:CheckBox ID="cbitem" runat="server" Text='<%# Eval("ItemName") %>' />  
          <asp:Label ID="Label4" runat="server" Text="( 需求數量:" Visible='<%# Eval("NeedQty") %>' />  
          <asp:TextBox ID="tbQty" runat="server" Width="30px" Visible='<%# Eval("NeedQty") %>'  
            Text="0" Enabled="false" MaxLength="5" JQ="tbQty" />  
          <asp:Label ID="Label5" runat="server" Text=" )" Visible='<%# Eval("NeedQty") %>' />  
        </td>  
      </tr>  
    </ItemTemplate>  
  </asp:ListView>  
</table>

下方為Jquery實作部分，將此段Script，置於Header中即可。

<% if (false)  
    { %>  
<script src="../Script/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>  
<% } %>  
<script type="text/javascript">  
  $(document).ready(function () {  
    //CheckBox互動,以Table的ID=ItemTable,找這個Table裡的checkbox (input type=checkbox)  
    $('#ItemsTable :checkbox').change(function () {  
      //取得被點選CheckBox的ClientID.  
      var ckid = $(this).attr('id');  
      //找到被點選的CheckBox後的第一個Type=text的ClientID.  
      var tbid = $('#' + ckid + ' ~ :text').first().attr('id');  
      if ($('#' + tbid).length == 1) {  //如果有正確取到TextBox(因這個TextBox為動態顯示)  
        //取得是否被勾選  
        var cked = $(this).attr('checked');  
        if (cked) {  
          $('#' + tbid).val('1');  //被勾選,將TextBox值改為,數量1  
          $('#' + tbid).attr('disabled', ''); //設定是否可更改  
        } else {  
          $('#' + tbid).val('0');  //被取消勾選,將TextBox值改為,數量0  
          $('#' + tbid).attr('disabled', 'disabled'); //設定是否可更改  
        }  
      }  
    });
  
    //TextBox檢核互動,以Table的ID=ItemTable,找這個Table裡的textbox (input type=textbox)  
    $('#ItemsTable :text').keyup(function () {  
      //檢查是否含非數字字元  
      if (isNaN($(this).val())) {  
        alert('只可輸入數字字元!');  
        this.value = this.value.replace(/[\D]/g, '');  
      }  
      //檢查是否只輸入0  
      if ($(this).val() == '0') {  
        alert('至少要有數量1!');  
        this.value = '1';  
      }  
    }).focusout(function () {  
      //檢查是否未輸入數量  
      if ($(this).val() == '') {  
        alert('至少要有數量1!');  
        this.value = '1';  
      }  
    });  
  });    
</script>

分享給大家。