Question

我已经创建了一个ASP CheckBoxList，我的目标是默认选择前3个选项。可以一起选择前3个选项中的任意数量，但第4个选项是互斥的。所以我创建了一个方法来查看是否选中了第4个选项，然后取消选择前3个选项。此外，如果选中前3个选项中的任何一个，则取消选择第4个选项。这很好用，直到我为CSS添加jQuery UI。现在它不会取消选中click事件上的任何其他选项。我查了一下，它进入了方法。没有错误。它只是不取消选中复选框。此外，有时我必须单击两次复选框才能选择/取消选择选项。有什么想法吗？

<asp:CheckBoxList runat="server" ID="StatusCheckBoxList" CssClass="jqcheck">
      <asp:ListItem Text="1" Value="1" Selected="True"></asp:ListItem>
      <asp:ListItem Text="2" Value="2" Selected="True"></asp:ListItem>
      <asp:ListItem Text="3" Value="3" Selected="True"></asp:ListItem>
      <asp:ListItem Text="4" Value="4"></asp:ListItem>
</asp:CheckBoxList>


function ChangeOptions(chkid) {

        var op1 = document.getElementById(chkid + "_0");
        var op2 = document.getElementById(chkid + "_1");
        var op3 = document.getElementById(chkid + "_2");
        var op4 = document.getElementById(chkid + "_3");

        if (op4.checked) {
            op1.checked = false;
            op2.checked = false;
            op3.checked = false;
        } 
        else {
            op4.checked = false;
        }
    }

在后面的代码中，我附加了onclick事件：

StatusCheckBoxList.Attributes.Add("onclick", "ChangeOptions('" + StatusCheckBoxList.ClientID + "')");

CSS标记：

function loadJqueryUI() {

$(document).ready(function () {
    $(".jqcheck").buttonset();
}

这是我尝试使用的jQuery UI我的功能：http://jqueryui.com/button/#checkbox

Answer 1

发现了这个问题。需要刷新jquery对象，因此在ChangeOptions（）函数末尾添加以下代码修复了问题：

$(".jqcheck").buttonset("refresh");

使用jQuery UI以编程方式设置CheckBoxList项

1 个答案: