Question

I’ve created a function to make my checkboxes as radio buttons with addition that they can be deselected.
The problem I’m encountering is that when same box is clicked for second time bit faster (not a fast double click) it doesn’t do anything, like it hasn’t caught the event.

They go in multiples by two, which share names.

checkbox name 1
checkbox2 name 1

checkbox3 name 2
checkbox4 name 2 ....

This is my function, it works well, aside from that glitch.

$('#MyDiv').find('input[type="checkbox"]').click(function() {
    if (!$(this).is(':checked')) {
        $(this).prop('checked', false);
        return;
    }
    $('#MyDiv').find('input[type="checkbox"][name=' + $(this).attr('name') + ']').each(function() {
        $(this).prop('checked', false);
    });
    $(this).prop('checked', true);
});

Html example:

<div id="MyDiv">
    <div>
        <p>
            <input id="MyDivUsage_Yes" type="checkbox" name="MyDivUsage"  />
            <label for="MyDivUsage_Yes">Yes</label>
            <input id="MyDivUsage_No" type="checkbox" name="MyDivUsage" />
            <label for="MyDivUsage_No">No</label>
        </p>

    </div>
</div>​

For some reason it wont work on jsfiddle.

Answer 1

Try this:

var checked = {};
    $('.desectable-radio').each(function (index) {
        checked[index] = this.checked;
        $(this).click(function () {
            if (checked[index])
                this.checked = false;
            for (var i in checked) {
                checked[i] = false;
            }
            checked[index] = this.checked;
        });
    });

Fiddle: http://jsfiddle.net/dFDeX/1/