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按钮，它将取消选择它并且永远不会再次工作。如果我运行我的小提琴并选择Active按钮，即使按钮代码相同，它也不会有效！

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

Answer 1

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

<强> jsFiddle example

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

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

和...

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

选择单选按钮时出奇怪的问题

1 个答案: