ESLintのルールでno-invalid-thisのエラーが解消できない。

Question

前提・実現したいこと

ESLintのルールで$(this)を使うとno-invalid-thisのメッセージがでてしまう。
プロジェクトの規則によりルールは変えず、エラーを解消したい。

発生している問題・エラーメッセージ

アンケートサイトで性別のチェックボックスを設置しており、ひとつしかチェックできないようにするスクリプトを書いています。
ESLintのルールで$(this)を使うとno-invalid-thisのメッセージがでてしまいます。

該当のソースコード

言語
JavaScript、jquery

  const $checkTarget = $('.p-gender__check');
  $checkTarget.on('click', function() {
   　$checkTarget.prop('checked', false);
   　$(this).prop('checked', true);
   　$checkTarget.next().removeClass('is-change');
  　　　$(this).next().addClass('is-change');
  });

試したこと

調べたところ、
「クラスまたはクラスのようなオブジェクトの外側で、thisキーワードを使うのを許可しない」
という内容だということはわかり、中身を関数化した上でJSDocコメント
/** @this Foo */
などをつけると、エラーはなくなりますが、動かなくなってしまいます。

コンストラクタやオブジェクトリテラシーなどについても知識が至らない点が多く、どうすれば解決できるのか、分からなくて困っております。

お詳しい方、上記のコードで何が問題なのか、どうかご教授頂けませんでしょうか。

補足情報（FW/ツールのバージョンなど）

ESLintのルールはグーグルの標準のものを使用しております。

Comments

[hoshi-takanori]

よく分かりませんが、たぶん jQuery ではよく $(this) を使うのに、それを禁止する lint のルールを採用すること自体が間違ってるのでは。

Answer 1

ESlintのルールでjqueryは有効にしていますか？

  2     "env": {
  3         "browser": true,
  4         "jquery": true,
  5         "commonjs": true,
  6         "es2021": true,
  7         "node": true
  8     },