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

【问题标题】：Programmatically setting CheckBoxList items using jQuery UI使用 jQuery UI 以编程方式设置 CheckBoxList 项
【发布时间】：2014-06-25 16:03:37
【问题描述】：

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

<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

【问题讨论】：

发布生成的 HTML 代码。如果您使用的是 Chrome，请按 F12，使用放大镜指向您的元素，然后粘贴结构。可能发生的情况是未使用您指定的 ID 解析 LIstItem 的元素。
这是我的代码的简化版本。我实际上无法粘贴我的真实代码的 html 标记。您是否建议 jQuery 正在更改 listitem 元素的名称？如果我删除代码的 CssClass="jqcheck" 部分，这段代码就可以正常工作。
不是 jQuery，而是 ASP.NET。为了解析<asp: 标记元素，ASP.NET 更改了 ID，因此它们在（最终）母版页下是唯一的。 ListItems 的 ID 可能在运行时被更改。
尝试为每个ListItem设置ID和ClientIDMode = "static"属性。
你能发布 jqcheck 的 CSS 标记吗？

标签： javascript jquery asp.net jquery-ui checkbox

【解决方案1】：

发现问题。 jquery 对象需要刷新，所以在 ChangeOptions() 函数末尾添加以下代码解决了这个问题：

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

【讨论】：