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

您何时致电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' : '' }
            });
        });
    };

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

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

jQuery-UI按钮设置初始图标

3 个答案: