Question

尝试在表单加载时设置自定义复选框值。 Debug告诉我复选框反映了从源加载的值，但自定义图形不会更新。

我的表格中有

<input class="checkbox" type="checkbox" name="uitem_autorenew" id="uitem_autorenew" />

我的风格：

    .checkbox {
        display: none;
    }

    .toggle {
        background: url("toggle.png") bottom left;
        display: block;
        width: 70px;
        height: 22px;
    }

    .toggle.checked {
        background-position: top left;
    }

代码包括以下

        $(document).ready(function() {

        $('.checkbox').after(function() {
            if ($(this).is(":checked")) {
                return "<a href='#' class='toggle checked' ref='" + $(this).attr("id") + "'></a>";
            } else {
                return "<a href='#' class='toggle' ref='" + $(this).attr("id") + "'></a>";
            }

        });

...进入具有开放事件的对话框...明确根据数据设置检查或取消选中功能

                var ar=$(this).data('renew');
                console.log("Value of ar = " + ar);  // which is Y

                if (ar =="Y"){
                    $("#uitem_autorenew").prop('checked',true);  // tried this 
                    $("#uitem_autorenew").toggleClass("checked");   //tried this too


                }

                console.log ("Is checkbox checked?");
                console.log ($("#uitem_autorenew").prop('checked'));   // yes it is but the graphic has not toggled. Top left of toggle.png is has word "YES"

我只是想知道在样式没有改变的情况下我缺少什么。任何线索都欢迎并提前感谢。凯文

Answer 1

您可以在复选框元素上切换“已检查”类，但您想为动态创建的a-tag更改它。所以尝试改变

$("#uitem_autorenew").toggleClass("checked");

到

$(".toggle").toggleClass("checked");

jQuery自定义复选框 - 图形更新无法正常工作

1 个答案: