选择单选按钮的奇怪问题

Question

我似乎在使用 jQuery 选择单选按钮时遇到问题。我整理了一个simple Fiddle here 来演示这个问题。这是我的 HTML：

<div id="divRadioButtons">
    <div style="width: 600px; margin: 5px auto;">
        <div style="display: inline"><input type="radio" name="activeStatus" value="Active" id="rbActiveActive" checked="checked">Active</div>&nbsp;
        <div style="display: inline"><input type="radio" name="activeStatus" value="Inactive" id="rbActiveInactive">Inactive</div>&nbsp;
        <div style="display: inline"><input type="radio" name="activeStatus" value="ComingSoon" id="rbActiveComingSoon">Coming Soon</div>
    </div>
</div>
<div style="display: inline-table">
    <input type="button" value="Active" id="btnActive" />
</div>
<div style="display: inline-table">
    <input type="button" value="Inactive" id="btnInactive" />
</div>

这是我的 jQuery：

$(function() {
    Reset();

    $('#btnActive').click(function() {
        Reset();
        $('#rbActiveActive').attr('checked', true);
        $('#rbActiveInactive').attr('checked', false);
        $('#rbActiveComingSoon').attr('checked', false);
        $('#divRadioButtons').show();

    });

    $('#btnInactive').click(function() {
        Reset();
        $('#rbActiveActive').attr('checked', false);
        $('#rbActiveInactive').attr('checked', true);
        $('#rbActiveComingSoon').attr('checked', false);
        $('#divRadioButtons').show();
    });
});

function Reset()
{
    $('#divRadioButtons').hide();
    $('#rbActiveActive').attr('checked', false);
    $('#rbActiveInactive').attr('checked', false);
    $('#rbActiveComingSoon').attr('checked', false);
}

当我单击Active 按钮时，我希望选中活动的单选按钮。当我单击 Inactive 按钮时，我希望选中 Inactive 单选按钮。

这个问题真的很奇怪，因为看看这个。如果我运行我的小提琴并单击Inactive 按钮，它就可以工作。但是，如果我第二次（或第三次或第四次）单击Inactive 按钮，它会取消选择它并且不再工作。如果我运行我的小提琴并选择 Active 按钮，它永远不会工作，即使按钮代码相同！

有人可以指出我正确的方向吗？我似乎在这个问题上扯了我的头发。

Answer 1

简单，用.prop()代替.attr()。

jsFiddle example

正如.prop() 的文档所述：

属性通常会影响 DOM 元素的动态状态，而无需 更改序列化的 HTML 属性。示例包括值 输入元素的属性，输入的禁用属性和 按钮，或复选框的选中属性。 .prop() 方法 应该用于设置禁用和检查而不是 .attr() 方法。

还有……

关于checked属性要记住的最重要的概念是 它不对应于选中的属性。属性 实际上对应于 defaultChecked 属性，应该使用 仅用于设置复选框的初始值。选中的属性 值不会随着复选框的状态而改变，而 已检查的属性。