使用复选框模拟单选按钮,只触发一次更改事件？

Question

我想使用复选框模拟单选按钮行为,这表示:

选中复选框后,将取消选中所有其他具有相同名称的复选框(此处为选择器)

但是,如果我尝试做类似的事情:

$('body').delegate('.myradio', 'click', function(e) {
    $('.myradio').prop('checked', false);
    $(this).prop('checked', true);
});

这会触发change事件两次.

如果我尝试添加e.preventDefault:

$('body').delegate('.myradio', 'click', function(e) {
    $('.myradio').prop('checked', false);
    $(this).prop('checked', true);
    e.preventDefault();
});

根本不会触发任何事件,也不会选中该复选框.

最后,如果我尝试自己触发事件:

$('body').delegate('.myradio', 'click', function(e) {
    $('.myradio').prop('checked', false);
    $(this).prop('checked', true);
    e.preventDefault();
    $(this).change();
});

该change事件也被调用两次.

有关信息,我的所有复选框都有唯一的ID.

除了选中的复选框之外,禁用所有复选框的方法是什么？

Answer 1

如果我正确理解你的问题,以下应该有效.

$('body').delegate('.myradio', 'click', function (e) {
    var $element = $(this)[0];
    $('.myradio').each(function () {
        if ($(this)[0] !== $element)
            $(this).prop('checked', false);
    });
});

这样,复选框组的行为类似于单选按钮组.除非您可以取消选择所选项目.

下面的代码使得该组的行为更像是一个无线电组.进行选择后,您无法取消选择.

$('body').delegate('.myradio', 'click', function (e) {
    var $element = $(this)[0];

    if ($(this).prop('checked') == false) {
        $(this).prop('checked', true);
        return;
    }

    $('.myradio').each(function () {
        if ($(this)[0] !== $element)
            $(this).prop('checked', false);
    });
});