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);
    });
});

Answer 2

如果您仍希望能够取消选中复选框

，则可以这样做

$('input[type=checkbox]').change(function(){ // <-- use the change event
  var group = $(this).attr('name'); // get the group
  $('input[name='+group+']').not(this).prop('checked',false);  // set others to unchecked
});

http://jsfiddle.net/rmJpB/

Answer 3

您可以使用on（）函数。

$('body').on('click', '.myradio', function(){
  $('.myradio[name="'+$(this).attr('name')+'"]').prop('checked', false);
  $(this).prop('checked', true);
});

取消选中具有相同名称的所有其他复选框，选中当前复选框。

http://jsbin.com/ofibow/2/edit

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

3 个答案: