onclickイベントの演算子を使用して複数の要素をターゲットにする方法

Question

ここでは、クリックされたボタンとは別のボタンをすべて無効にしながら、onClickイベントに対して複数の要素をターゲットにしたいとします。

これまでのところ私はこのている：

$("#elementone", "elementtwo, #elementthree").on('click', function(){ 
       if($(this).is(':checked')){ 
     $('#elementone, #elementtwo, #elementthree').attr('disabled', true); 
    } 
}); 

以下のコード私はしかし、私はこれを達成するために、よりエレガントな方法があるだろう期待していた何をしたいですか？三つのボタンの上に「要素」（またはその他の有効なクラス名）という名前のクラスを置き、ある代わりにidの

$("#elementone").on('click', function(){ 
       if($(this).is(':checked')){ 
     $('#elementtwo, #elementthree').attr('disabled', true); 
    } 
}); 

$("elementtwo").on('click', function(){ 
       if($(this).is(':checked')){ 
     $('#elementone, #elementthree').attr('disabled', true); 
    } 
}); 

$("#elementthree").on('click', function(){ 
       if($(this).is(':checked')){ 
     $('#elementone, #elementtwo').attr('disabled', true); 
    } 
}); 

Answer 1

使用class。次に、あなたが使用することができます。

var $elements = $('.element'); 
$elements.click(function() { 
    if ($(this).is(':checked')) { 
     $elements.not(this).prop('disabled', true); 
    } 
}); 

注：

1. .not(this)への呼び出しは、セットから、現在クリックされたボタンを削除します。
2. .attr()の代わりに.prop()を使用してボタンを無効にする必要があります。
3. これらが<input type="checkbox">要素の場合は、clickイベントの代わりにchangeイベントを使用する方がよいでしょう。

Answer 2

$("#elementone,#elementtwo,#elementthree").on('click', function(){ 
    var clickedId = $(this).attr("id"), 
     selectors = { 
      elementone: "#elementtwo,#elementthree", 
      elementtwo: "#elementone,#elementthree", 
      elementthree: "#elementone,#elementtwo" 
     }, 
     selector = selectors[clickedId]; 

    if($(this).is(':checked')){ 
     $(selector).attr('disabled', true); 
    } 
});