Pretty checkboxes jQuery selector problem

I am trying to replace the classic default checkbox with a blocked link inside a div - it would display as a button and by clicking on it it would toggle the class. Actually toggling the class works but I also need a solution how to toggle if the checked attribute. See below

This is my HTML code

<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>

The hidden input is there because ASP.NET MVC introduces it when using Html.Checkbox() helper.

This is my 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>

Obviously this only turns on checked but when it's already checked it doesn't uncheck it. And I believe it should do it to both inputs.

Can someone help me with 开发者_JAVA技巧a right selector/solution?

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

Or you could maybe just force the "click" event for the checkbox, like realCheckbox.click()

Not certain the purpose of the links, but traditionally text is bound to a checkbox using a label and the for attribute. Here is an example:

<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>

I left your links in. However, if you don't need them just remove and leave the labels. Here is a jsFiddle for you to play with: http://jsfiddle.net/bK3ju/1/. Notice no javascript is needed to hook up the labels to the checkboxes.

Bob