CheckboxList在ASP.NET中選中和取消選中

Question

我有三個復選框列表，它們與數據庫列表綁定。 從數據庫獲取的值是不同的值。 復選框與數據綁定后，我必須選擇一個復選框。 如果我從第一個復選框列表類別中選擇一個復選框，則它應該在第二個和第三個復選框列表中顯示匹配的值。

例：

CheckboxList 1:
1.100
2.200
3.300
4.400

CheckboxList 2:
1.powder
2.Capsule
3.gel

CheckboxList 3:
1.10
2.30
3.30

如果我從復選框列表1中選擇100，那么它應該僅從復選框列表2中啟用粉末和膠囊，並從復選框列表3中啟用10，並禁用其他選項，如果我從復選框1中選擇了多個選項，則應該根據選擇啟用復選框。

Answer 1

您可以使用JavaScript（我使用jQuery）來避免刷新頁面。

我定義了一種矩陣，該矩陣對應於第一個復選框列表的不同選擇。

第一個復選框列表中的更改（選中的復選框）會觸發一個功能，該功能將從該復選框列表中選中所有復選框。 然后獲得檢查的值，例如01獲得矩陣matrix["01"] ： 0|1的相應選項； 第二個復選框列表將啟用索引0的復選框，第三個復選框列表將啟用索引1的復選框。

您可以在答案的底部嘗試/運行HTML版本。

您可以在WebForm中嘗試以下代碼：

ASPX：

<asp:CheckBoxList ID="CheckBoxList1" onchange="manageCheckboxList();" runat="server">
    <asp:ListItem Value="0" Text="100"></asp:ListItem>
    <asp:ListItem Value="1" Text="200"></asp:ListItem>
    <asp:ListItem Value="2" Text="300"></asp:ListItem>
    <asp:ListItem Value="3" Text="400"></asp:ListItem>
</asp:CheckBoxList>

<hr />

<asp:CheckBoxList ID="CheckBoxList2" runat="server">
    <asp:ListItem Value="0" Text="Powder"></asp:ListItem>
    <asp:ListItem Value="1" Text="Capsule"></asp:ListItem>
    <asp:ListItem Value="2" Text="Gel"></asp:ListItem>
</asp:CheckBoxList>

<hr />

<asp:CheckBoxList ID="CheckBoxList3" runat="server">
    <asp:ListItem Value="0" Text="10"></asp:ListItem>
    <asp:ListItem Value="1" Text="20"></asp:ListItem>
    <asp:ListItem Value="2" Text="30"></asp:ListItem>
</asp:CheckBoxList>

JavaScript（jQuery）：

function manageCheckboxList() {
    // Get checkbox checked from first checkbox list
    var checked = $('#CheckBoxList1').find('input:checked');

    // Check if there's a least one checkbox checked
    if (checked.length > 0) {
        var matrix = {}
        matrix["0"] = "01|0";
        matrix["1"] = "12|01";
        matrix["2"] = "2|2";
        matrix["3"] = "1|0";
        matrix["01"] = "0|1";
        matrix["02"] = "0|2";
        matrix["03"] = "1|1";
        matrix["12"] = "1|2";
        matrix["13"] = "0|2";
        matrix["23"] = "12|12";
        matrix["012"] = "012|012";
        matrix["013"] = "012|012";
        matrix["023"] = "01|01";
        matrix["123"] = "12|02";
        matrix["0123"] = "012|012";

        var result = "";

        // Construct result
        $(checked).each(function () {
            result += $(this).val();
        });

        var subchoices = matrix[result].split('|');

        // Update Checkbox list 2 and 3
        updateCheckboxList($("#CheckBoxList2"), subchoices[0], false);
        updateCheckboxList($("#CheckBoxList3"), subchoices[1], false);
    } else {
        // Reset checkbox
        updateCheckboxList($("#CheckBoxList2"), null, false);
        updateCheckboxList($("#CheckBoxList3"), null, false);
    }
}

function updateCheckboxList(el, subchoices, disableCheckboxList) {
    var checkboxList = $(el).find("input");

    for (var i = 0; i < checkboxList.length; i++) {
        if (subchoices != null) {
            var disabled = true;

            if (subchoices.indexOf($(checkboxList[i]).val()) >= 0) {
                disabled = false;
            }

            $(checkboxList[i]).prop("disabled", disabled);
        } else {
            $(checkboxList[i]).prop("disabled", false);
        }
    }

    $(el).prop("disabled", disableCheckboxList);
}

請嘗試以下代碼片段（以HTML而不是ASPX）查看結果：

 function manageCheckboxList() { // Get checkbox checked from first checkbox list var checked = $('#CheckBoxList1').find('input:checked'); // Check if there's a least one checkbox checked if (checked.length > 0) { var matrix = {} matrix["0"] = "01|0"; matrix["1"] = "12|01"; matrix["2"] = "2|2"; matrix["3"] = "1|0"; matrix["01"] = "0|1"; matrix["02"] = "0|2"; matrix["03"] = "1|1"; matrix["12"] = "1|2"; matrix["13"] = "0|2"; matrix["23"] = "12|12"; matrix["012"] = "012|012"; matrix["013"] = "012|012"; matrix["023"] = "01|01"; matrix["123"] = "12|02"; matrix["0123"] = "012|012"; var result = ""; // Construct result $(checked).each(function () { result += $(this).val(); }); var subchoices = matrix[result].split('|'); // Update Checkbox list 2 and 3 updateCheckboxList($("#CheckBoxList2"), subchoices[0], false); updateCheckboxList($("#CheckBoxList3"), subchoices[1], false); } else { // Reset checkbox updateCheckboxList($("#CheckBoxList2"), null, false); updateCheckboxList($("#CheckBoxList3"), null, false); } } function updateCheckboxList(el, subchoices, disableCheckboxList) { var checkboxList = $(el).find("input"); for (var i = 0; i < checkboxList.length; i++) { if (subchoices != null) { var disabled = true; if (subchoices.indexOf($(checkboxList[i]).val()) >= 0) { disabled = false; } $(checkboxList[i]).prop("disabled", disabled); } else { $(checkboxList[i]).prop("disabled", false); } } $(el).prop("disabled", disableCheckboxList); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="CheckBoxList1" onchange="manageCheckboxList();"> <tr> <td> <input id="CheckBoxList1_0" type="checkbox" value="0" /> <label for="CheckBoxList1_0">100</label> </td> </tr> <tr> <td> <input id="CheckBoxList1_1" type="checkbox" value="1" /> <label for="CheckBoxList1_1">200</label> </td> </tr> <tr> <td> <input id="CheckBoxList1_2" type="checkbox" value="2" /> <label for="CheckBoxList1_2">300</label> </td> </tr> <tr> <td> <input id="CheckBoxList1_3" type="checkbox" value="3" /> <label for="CheckBoxList1_3">400</label> </td> </tr> </table> <hr /> <table id="CheckBoxList2"> <tr> <td> <input id="CheckBoxList2_0" type="checkbox" value="0" /> <label for="CheckBoxList2_0">Powder</label> </td> </tr> <tr> <td> <input id="CheckBoxList2_1" type="checkbox" value="1" /> <label for="CheckBoxList2_1">Capsule</label> </td> </tr> <tr> <td> <input id="CheckBoxList2_2" type="checkbox" value="2" /> <label for="CheckBoxList2_2">Gel</label> </td> </tr> </table> <hr /> <table id="CheckBoxList3"> <tr> <td> <input id="CheckBoxList3_0" type="checkbox" value="0" /> <label for="CheckBoxList3_0">10</label> </td> </tr> <tr> <td> <input id="CheckBoxList3_1" type="checkbox" value="1" /> <label for="CheckBoxList3_1">20</label> </td> </tr> <tr> <td> <input id="CheckBoxList3_2" type="checkbox" value="2" /> <label for="CheckBoxList3_2">30</label> </td> </tr> </table>