Question

我正在尝试使用div中的阻止链接替换经典默认复选框 - 它将显示为按钮，通过单击它将切换类。实际上切换类有效，但我还需要一个解决方案如何切换checked属性。见下文

这是我的HTML代码

<div class="editor-field">
    <div class="pretty-checkbox">
        <input checked="checked" id="IsLegalFirm" name="IsLegalFirm" type="checkbox" value="true" />
        <input name="IsLegalFirm" type="hidden" value="false" />
        <a href="#" class="checkbox selected">IsLegalFirm </a>
    </div>
</div>
<div class="editor-field">
    <div class="pretty-checkbox">
        <input checked="checked" id="IsTaxable" name="IsTaxable" type="checkbox" value="true" />
        <input name="IsTaxable" type="hidden" value="false" />
        <a href="#" class="checkbox selected">IsTaxable </a>
    </div>
</div>

隐藏的input就在那里，因为ASP.NET MVC在使用Html.Checkbox()帮助时引入了它。

这是我的JS：

<script type="text/javascript">
    $(document).ready(function () {
        $(".checkbox").click(
        function (event) {
            event.preventDefault();
            $(this).toggleClass("selected");
                            // this needs a change 
            $(this).parent().find(":checkbox").attr("checked", "checked");
        });
    });
</script>

显然这只会打开checked但是当它已经被检查时它不会取消选中它。我相信它应该对两个输入做到。

有人可以帮助我使用正确的选择器/解决方案吗？

Answer 1

$(document).ready(function () {
    $(".checkbox").click(
    function (event) {
        event.preventDefault();
        $(this).toggleClass("selected");
        var realCheckbox = $(this).parent().find(":checkbox");
        // the problem with this line is that this only toggles the value 
        // of the checked attribute from checked="" to checked="checked"
        // and vice versa and I had problems with this in HTML5, 
        // so I rewrote it as below

        // realCheckbox.attr("checked", realCheckbox.is(":checked") ? "" : "checked");

        if (realCheckbox.is(":checked")) {
            realCheckbox.removeAttr("checked");
        }
        else {
            realCheckbox.attr("checked", "checked");
        }
    });
});

或者您可以强制选中复选框的“点击”事件，例如realCheckbox.click()

Answer 2

不确定链接的目的，但传统上文本绑定到使用标签和for属性的复选框。这是一个例子：

<div class="editor-field">
    <div class="pretty-checkbox">
        <input checked="checked" id="IsLegalFirm" name="IsLegalFirm" type="checkbox" value="true" />
        <input name="IsLegalFirm" type="hidden" value="false" />
        <a href="#"><label for="IsLegalFirm" class="checkbox selected">IsLegalFirm </label></a>
    </div>
</div>
<div class="editor-field">
    <div class="pretty-checkbox">
        <input checked="checked" id="IsTaxable" name="IsTaxable" type="checkbox" value="true" />
        <input name="IsTaxable" type="hidden" value="false" />
        <a href="#"><label for="IsTaxable" class="checkbox selected">IsTaxable </label></a>
    </div>
</div>

我已将您的链接保留。但是，如果您不需要它们，只需删除并留下标签即可。这是一个jsFiddle供你玩：http://jsfiddle.net/bK3ju/1/。请注意，不需要使用javascript将标签连接到复选框。

鲍勃

漂亮的复选框jQuery选择器问题

2 个答案: