【jQuery】クリックイベントを切り替える

jquery

例えば、AとBボタンがあってAボタンをクリックしたらBボタンをクリックできないようにしたい・・といった場面に遭遇したのでその対策をメモ。

Aボタン


Bボタン

hasClassでクリックした要素をチェックする

さくっと説明すると、クリックした時に、予め設定したクラス（上記の場合だとaとb）をif文とhasClassでチェックしてクリックした要素に対してaddClassで「disabled」のクラスを設定し,他のpタグに「disabled」を設定した場合はremoveClassで「desabled」を削除する

クリックイベントの最初の処理として「desabled」クラスを持っていた場合は「return」でクリックイベントを終了させる

$("p").click(function(){

if($(this).hasClass("disabled")){
return false;
}
		
if($(this).hasClass("a")){
 //
 $(this).siblings("p").removeClass("disabled");
 $(this).addClass("disabled");
 //
 }else if($(this).hasClass("b")){
 //
 $(this).siblings("p").removeClass("disabled");
 $(this).addClass("disabled");
}

});