ラジオボタンの動作で、classをつけるor削除する にはどうしたらいいか？

Question

** 疑問点
以下のHTMLで、ケースに応じてtrタグの「クラスを付ける」または「クラスをはずす」を行いたいのですが、実現できておらず、どこが悪いのかわからず質問をさせていただきます

** やりたいこと
ラジオボタンrc1をクリックしたとき、
・プルダウンsel2を無効にする
・プルダウンsel2のあるtrにerrorクラスを削除
・プルダウンsel1のあるtrにerrorクラスを追加
ラジオボタンrc2をクリックしたとき、
・プルダウンsel1を無効にする
・プルダウンsel1のあるtrにerrorクラスを削除
・プルダウンsel2のあるtrにerrorクラスを追加

** 実現できていないこと
・classをはずすこと
・classをつけること

よろしくお願いします

<form>
<table>
<tr class="gc1">
  <td rowspan="2">
    <input type="radio" value="1" id="r1">見出し1
    <input type="radio" value="2" id="r2">見出し2
  </td>
  <td>選択No1<br>
    <select id="sel1">
      <option value="">Choice1-1</option>
      <option value="">Choice1-2</option>
      <option value="">Choice1-3</option>
    </select>
  </td>
<tr>
<tr class="gc2">
  <td>選択No2<br>
    <select id="sel2">
      <option value="">Choice2-1</option>
      <option value="">Choice2-2</option>
      <option value="">Choice2-3</option>
    </select>
  </td>
<tr>
</table>
<input type="submit" name="btn">
<script>
        $('#r1').click(function(){
            $('#sel1').removeAttr("disabled");
            $('#sel2').attr("disabled", "disabled");
            $('#sel1').parents(',gc2').find('tr').addClass("error");
            $('#sel2').parents('.gc1').find('tr').removeClass("error");
        });
        // 条件グループ
        $('#r2').click(function(){
            $('#sel1').attr("disabled", "disabled");
            $('#sel2').removeAttr("disabled");
            $('#sel1').parents('.gc1').find('tr').removeClass("error");
            $('#sel2').parents('.gc2').find('tr').addClass("error");
        });
</script>

Comments

[yu-smc]

実現したいことはわかりました。「実現できていない」というのが、どこまでできていて、どこでつまづいているのか教えていただけますか？

[m.ts10806]

「gc1タグ」「gc2タグ」というものはありませんが、そのあたりは認識問題ないですか？

[sakura-shi]

実現できていないこと
・classをはずすこと
・classをつけること

parents('gc1')の書き方が間違っていますね。parents('.gc1')これが正しいでしょうか？
ただ、このgc1の指定が正しいかどうかは理解できていません

[m.ts10806]

$('#sel2')などと同じく「セレクタ」なので指定の仕方自体は間違っていません。
修正後の挙動も教えてください。

[sakura-shi]

parents('.gc1')に変更しても
今実現できていないことは変わりません

[yu-smc]

まず、間違いのあるHTMLでjqueryは正しく動作しないので、そこから修正しましょう。
trタグの閉じタグのスラッシュがない、formタグの閉じタグがないところを直してください。

その上で、parents, findを使う意図がよくわからないのですが、＄('.gc1').addClass() とかではだめなんですか？

[m.ts10806]

一か所「,」になってますね。コンソール確認しましょう

[m.ts10806]

かなり前の質問で何も反応がないまま急に解決済みとなり戸惑っています。
https://teratail.com/help/question-tips#questionTips4-2結局どのように解決されたのでしょうか？

Answer 1

HTML勝手に改修してます。
radioにnameつけておかないとそれぞれが独立して動くのでラジオボタンの意味がありません。
rowspanが効くように置かれてません。

こうしたいのでは？

<form>
<table>
    <tr>
      <td rowspan="2">
        <input type="radio" name="r" value="1" id="r1">見出し1
        <input type="radio" name="r" value="2" id="r2">見出し2
      </td>
      <td>選択No1<br>
        <select id="sel1">
          <option value="">Choice1-1</option>
          <option value="">Choice1-2</option>
          <option value="">Choice1-3</option>
        </select>
      </td>
    </tr>
    <tr class="gc2">
      <td>選択No2<br>
        <select id="sel2">
          <option value="">Choice2-1</option>
          <option value="">Choice2-2</option>
          <option value="">Choice2-3</option>
        </select>
      </td>
    </tr>
</table>
<input type="submit" name="btn">
</form>

htmlは実はJavaScriptでも扱いやすいように変更しています。
これで1つにまとめることができるわけです。
まずはセレクトボックスの活性、非活性切り替え

$(function(){
    $('input[name=r]').on('click change',function(){
        const r =$(this).val();
        let rr = "2";
        if(r=="2"){
            rr = "1";
        }
        $('#sel'+r).prop('disabled',false);
        $('#sel'+rr).prop('disabled',true);
    });
});

あとは、trに追加、ですよね。
本当にtrでいいのか分かりませんが・・・・

$(function(){
    $('input[name=r]').on('click change',function(){
        const r =$(this).val();
        let rr = "2";
        if(r=="2"){
            rr = "1";
        }

        $('tr.gc'+r).removeClass('error');
        $('tr.gc'+rr).addClass('error');
        
        $('#sel'+r).prop('disabled',false);
        $('#sel'+rr).prop('disabled',true);
    });
});

というのは
例えば.error{background-color:#f00 ;}とした場合、

見出し１チェック

見出し２チェック

用途が分からないので何とも言えませんけど、これなら
「プルダウンのあるtrにerrorクラスを削除、追加」ではなく「tdにerrorクラスを削除、追加」じゃないかな？と思った次第です。

ひとまず、参考まで。

Answer 2

htmlをいじっていいならたとえばこう

<script>
$(function(){
  $(':radio[name=midasi]').on('change',function(){
    var midasi=$(this).val()
      $('[data-midasi]').prop('disabled',function(){
        return ! ($(this).data("midasi")==midasi);
      });
  });
});
</script>
<label><input type="radio" name="midasi" value="1">見出し1</label>
<label><input type="radio" name="midasi" value="2">見出し2</label>
<label><input type="radio" name="midasi" value="3">見出し3</label>
<br>
<select data-midasi="1">
<option value="">Choice1-1</option>
<option value="">Choice1-2</option>
<option value="">Choice1-3</option>
</select>
<select data-midasi="2">
<option value="">Choice2-1</option>
<option value="">Choice2-2</option>
<option value="">Choice2-3</option>
</select>
<select data-midasi="3">
<option value="">Choice3-1</option>
<option value="">Choice3-2</option>
<option value="">Choice3-3</option>
</select>
<br>
<input type="submit" name="btn">

Comments

[m.ts10806]

私もdata属性が有用な要件だと思います。