Question

我正在尝试使用以下代码切换复选框的值：

<div class="control-group">
        <label class="control-label checkbox" for="IsViewAsWebpage">
            {{#if this.IsViewAsWebpage}}
                <input type="hidden" id="IsViewAsWebpage" name="IsViewAsWebpage" value="true"/> 
                <input type="checkbox" class="enable-checkbox" checked /> 
            {{else}}
                <input type="hidden" id="IsViewAsWebpage" name="IsViewAsWebpage" value="false"/> 
                <input type="checkbox" class="enable-checkbox" /> 
            {{/if}}
            <span>View as Webpage</span>
        </label>
    </div>



'click .enable-checkbox': function (e) {
                if (e.currentTarget.parentElement.htmlFor == "IsViewAsWebpage") {
                     this.$('#IsViewAsWebpage').is(':checked');
            }

        }

我知道我在点击功能中误会了什么。我基本上想要在用户点击它时切换复选框值。有人能指出我正确的方向吗？谢谢。

Answer 1

单击您的复选框后，它将切换。这就是复选框的工作方式。

如果您希望隐藏的输入在切换复选框时更改value，我认为您想要的是：

$(".enable-checkbox").change(function (e) {
    if($(this).parent().attr("for") == "IsViewAsWebpage") {
        var checked = $(this).is(":checked"); // Returns true/false.
        $('#IsViewAsWebpage').attr("value", checked); // Sets true/false.
    }        
});

Answer 2

如果您想在单击复选框时使用handlebars.js切换内容，则每次修改复选框时都需要通过调用把手来替换内容

$(".enable-checkbox").change(function (e) {
    if($(this).parent().attr("for") == "IsViewAsWebpage") {
        var checked = $(this).is(":checked");
        IsViewAsWebpage = checked;
        $("#yourcontainer").html(Handlebars.compile(yourtemplatesource));
    }

}

那么你的IsViewAsWebpage变量应该是全局的，你的胡子条件应该只是：

{{#if IsViewAsWebpage}}

但是这一切都很复杂......只要使用Esthete解决方案，它将为您节省大量时间。

切换复选框值

2 个答案: