Jquery ui jQuery UI按钮设置初始图标

我使用以下jQuery脚本将复选框转换为jQuery UI按钮，并设置要显示的图标。单击按钮时，它还会更改图标。一切都很好。但是，我似乎无法根据复选框的初始选中状态选择正确的语法来设置初始图标

function setCheckBoxImages() {
        $(".check-box-image").button({
            icons: { primary: 'ui-icon-check' },
            text: false
        }).change(function () {
            $(this).button("option", {
                icons: { primary: this.checked ? 'ui-icon-check' : '' }
            });
        });
    };

<input class="check-box-image" type="checkbox" checked="@item.IsBusinessHours" id="checkbox1" disabled/><label for="checkbox1"></label>

函数setCheckBoxImages（）{
$（“.check box image”）。按钮({
图标：{primary:'ui图标检查'}，
文本：false
}).改变（功能）{
$（此）.button（“选项”{
图标：{primary:this.checked？'ui图标检查'：'''}
});
});
};

编辑： 这是我的最终工作标记和脚本，根据下面的accidentalgenius答案：

@Html.CheckBox(@cbMobileId, @item.IsMobile, new { @class = "check-box-image", disabled = "disabled" })<label for="@cbMobileId">    

function setCheckBoxImages() {
        var checkboxes= $(".check-box-image");

        checkboxes.button({
            text: false
        }).change(function () {
            $(this).button("option", {
                icons: { primary: this.checked ? 'ui-icon-check' : 'ui-icon-minus' }
            });
        });

        checkboxes.each(function () {
            $(this).change();
        });
    };

@Html.CheckBox（@cbMobileId，@item.IsMobile，新的{@class=“check-box-image”，disabled=“disabled”}）
函数setCheckBoxImages（）{
var复选框=$（“.check box image”）；
复选框。按钮({
文本：false
}).改变（功能）{
$（此）.button（“选项”{
图标：{primary:this.checked？'ui-icon-check'：'ui-icon-减号'}
});
});
复选框。每个（函数（）{
$（this.change（）；
});
};

您何时调用

setCheckBoxImages（）

？在看不到其余代码的情况下，这很困难，但请尝试在

document.ready

上调用它

您应该根据复选框的状态设置初始图标：

function setCheckBoxImages() {
        var check = $(".check-box-image");
        check.button({
            icons: { primary: check.is(':checked') ? 'ui-icon-check' : '' },
            text: false
        }).change(function () {
            $(this).button("option", {
                icons: { primary: this.checked ? 'ui-icon-check' : '' }
            });
        });
    };

---

也许你的函数还没有被调用。 在你的javascript上试试这个

$(document).ready(function(){
    $(".check-box-image").button({
        icons: { primary: 'ui-icon-check' },
        text: false
    }).change(function () {
        $(this).button("option", {
            icons: { primary: this.checked ? 'ui-icon-check' : '' }
        });
    });
});

---

您可以遍历所有jQuery按钮，并为每个按钮调用change函数。

我在答案中添加了一些代码。我基本上是在按钮构造过程中应用相同的验证。我刚刚尝试了你的代码，但它对我不起作用。所有的“复选框”仍然显示为“ui图标检查”图标-无论它们是否被选中。我注意到“检查”变量包含一个复选框数组（所有与指定类匹配的复选框）。这就是代码不起作用的原因吗？如果它是数组，则需要像在最后一次编辑中那样循环它。我已经在document.ready函数中调用了此脚本。好的，我认为您文章中的代码没有错误。我把你的代码复制粘贴到我的html文件中，它就开始工作了。可能您的其他javascript代码有错误，因此您的代码无法工作。检查一下！我已经把我在上面的原始问题中使用的最后一个脚本放好了。