Красивые флажки JQuery селектор проблемы

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");
        }
    });
});

Или вы можете просто принудительно вызвать событие "click" для флажка, например 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.

Bob