Check box attributes checked is true, but tick is not shown

Question

I have two check boxes, that I want to make to behave like they are radio buttons (only one of them is checked at time).

So, I have easy found a jQuery solution that should do the trick:

$("input:checkbox").click(function(){
    var group = "input:checkbox[name='"+$(this).attr("name")+"']";
    $(group).attr("checked",false);
    $(this).attr("checked",true);
});

The HTML looks like this:

<div class="radio">
    <label for="q_is_active_true">Is active</label>
    <input name="radio_buttons" type="hidden" value="0"><input id="q_is_active_true" name="radio_buttons" type="checkbox" value="1">
    <label for="q_is_active_false">Is not active</label>
    <input name="radio_buttons" type="hidden" value="0"><input id="q_is_active_false" name="radio_buttons" type="checkbox" value="1">
</div>

But when I click on one of the check boxes, even its "check" attribute is set to "checked" no tick is shown:

Answer 1

You need to be setting the checked status by it's property to achieve what you want:

$("input:checkbox").click(function(){
    var group = "input:checkbox[name='"+$(this).attr("name")+"']";
    $(group).prop("checked", false);
    $(this).prop("checked", true);
});

jsFiddle here.