jQuery-UI 按钮设置初始图标

Question

我有以下 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>

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

@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();
        });
    };

Answer 1

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

Answer 2

也许你的函数没有被调用。 在你的 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' : '' }
        });
    });
});

Answer 3

你什么时候打电话给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' : '' }
            });
        });
    };