今天有個需求，功能如上圖，可讓User任意勾選所需項目，且後方可輸入所需數量。
額外希望可達到的功能需求如下：
- 項目未勾選時，後方為不可輸入狀態，且預設值為0。
- 項目勾選後，後方即改變狀態為可輸入，且數量預設為1。
- 數量欄位只可輸入數字。
- 如項目已被勾選，則數量不可為0。
- 如項目已被勾選，則需求欄位不可為空。
上方輸入表單，使用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>
分享給大家。
