0

チェックボックスを使用してラジオボタンの動作をシミュレートしたいと思います。これは次のように述べています。

チェックボックスをオンにすると、同じ名前の他のすべてのチェックボックス (ここではセレクター) がオフになります

しかし、次のようなことをしようとすると:

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

changeこれにより、イベントが 2 回トリガーされます。

追加しようとすると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イベントも 2 回呼び出されます。

参考までに、私のすべてのチェックボックスには一意の ID があります。

チェックされているものを除くすべてのチェックボックスを無効にする適切な方法は何ですか?

4

3 に答える 3

5

あなたの質問を正しく理解していれば、次のように動作するはずです。

$('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);
    });
});
于 2013-01-15T14:40:32.540 に答える
3

チェックボックスの選択を解除できるようにしたい場合は、このようにすることができます

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

于 2013-01-15T14:49:36.967 に答える
0

on() 関数を使用できます。

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

同じ名前の他のすべてのチェックボックスをオフにし、現在のチェックボックスをオンにします。

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

于 2013-01-15T14:55:34.067 に答える