Y2J

今天小弟剛好遇到一個小麻煩

那就是需要在 CheckBoxList 中判斷所選擇的值

並針對此值,對textbox做 enabled 或 disabled 功能

 

在asp.net頁面上放個元件並設定其值

 

<tr>
    <td>
        評估方式：
    </td>
    <td class="bg5" colspan="3">
        <asp:CheckBoxList ID="chklTest" name="CheckBoxTest" runat="server" RepeatDirection="Horizontal" onclick="ChkOther();">
            <asp:ListItem Value="questionnaire">問卷評估</asp:ListItem>
            <asp:ListItem Value="report">書面心得報告</asp:ListItem>
            <asp:ListItem Value="examination">隨堂考試</asp:ListItem>
            <asp:ListItem Value="other">其他</asp:ListItem>
        </asp:CheckBoxList>
    </td>
    <td>
        <asp:TextBox ID="txtOther" runat="server" Width="95%" Enabled="False"></asp:TextBox>
    </td>
</tr>

 

之後 View In Browser 後,查看頁面原始檔

 

<tr>
    <td>
        評估方式：
    </td>
    <td>
        <table id="chklTest" name="CheckBoxTest" onclick="ChkOther();" border="0">
			<tr>
				<td><input id="chklTest_0" type="checkbox" name="chklTest$0" /><label for="chklTest_0">問卷評估</label></td>
				<td><input id="chklTest_1" type="checkbox" name="chklTest$1" /><label for="chklTest_1">書面心得報告</label></td>
				<td><input id="chklTest_2" type="checkbox" name="chklTest$2" /><label for="chklTest_2">隨堂考試</label></td>
				<td><input id="chklTest_3" type="checkbox" name="chklTest$3" /><label for="chklTest_3">其他</label></td>
			</tr>
		</table>
    </td>
    <td>
        <input name="txtOther" type="text" id="txtOther" disabled="disabled" style="width:95%;" />
    </td>
</tr>

 

其實在網頁原始檔內我們可以看到, input 裡並沒有 Value 的值可以讓我們抓取

所以現在我們需要在後台程式碼的 Page_Load 幫它加一個 attribute

讓我們可以在前端可以抓取所需要的值

 

protected void Page_Load(object sender, EventArgs e)
{
    foreach (ListItem li in chklTest.Items)
    {
        li.Attributes["ChkValue"] = li.Value;
    }
}

 

Page_Load attribute加入後,再次查看原始檔

 

<tr>
    <td class="bg3" width="10%">
        評估方式：
    </td>
    <td class="bg5" colspan="3">
        <table id="chklTest" name="CheckBoxTest" onclick="ChkOther();" border="0">
			<tr>
				<td><span ChkValue="questionnaire"><input id="chklTest_0" type="checkbox" name="chklTest$0" /><label for="chklTest_0">問卷評估</label></span></td>
				<td><span ChkValue="report"><input id="chklTest_1" type="checkbox" name="chklTest$1" /><label for="chklTest_1">書面心得報告</label></span></td>
				<td><span ChkValue="examination"><input id="chklTest_2" type="checkbox" name="chklTest$2" /><label for="chklTest_2">隨堂考試</label></span></td>
				<td><span ChkValue="other"><input id="chklTest_3" type="checkbox" name="chklTest$3" /><label for="chklTest_3">其他</label></span></td>
			</tr>
		</table>
    </td>
    <td class="bg3" colspan="5">
        <input name="txtOther" type="text" id="txtOther" disabled="disabled" style="width:95%;" />
    </td>
</tr>

 

發現我們所需要的值都有了

這時候就可以用 jQuery 方式,來判斷是否為 other 並對 txtOther 做 enabled 或 disabled

<script src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript">

    function ChkOther()
    {
        var str = "";
        var len = $("#chklTest input[type=checkbox][checked]").length;
        
        if (len > 0)
        {
            $("input[type=checkbox]:checked").each(function (i) 
            {                    
                str = $(this).parent().attr("ChkValue");
                
                if (str == "other")
                {
                    $("#txtOther").attr("disabled", false);
                }
                else
                {
                    $("#txtOther").attr("disabled", true);
                }
            });
        }
    }

</script>

 

 

Y2J's Life:http://kimenyeh.blogspot.tw/