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

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

This way the checkbox group behaves like a radio button group. Except that you can de-select a selected item.

---

Below code makes the group behave more like a radio group. You can't de-select once you made a selection.

$('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

You can do it like this if you still want to be able to unselect a checkbox

$('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

You can use on() function.

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

Uncheck all the other checkboxes with the same name, check the current checkbox.

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