フォームのラジオボタンが反応しない

Question

前提・実現したいこと

２つあるうちのラジオボタンをどちらか選択したら、フォームの最後にあるsubmitボタンにis-activeクラスを付与したいのですが、１つ目のラジオボタンを選択したら正常にis-activeクラスがつくのですが、なぜか２つ目のラジオボタンを選択すると、is-activeクラスが取れてしまいます。

 <form action="" class="contact-form" id="js-form">
                        <div class="contact-form__radio contact-form__row">
                            <div class="contact-form__label contact-form__label__3">
                                <label><span>法人/個人の選択</span></label>
                            </div>
                            <div class="contact-form__radiobox">
                                <label>
                                    <input type="radio" name="yourRadio" class="contact-form__radio__button"  value="法人" required checked>
                                    <span>法人</span>
                                </label>
                                <label>
                                    <input type="radio" name="yourRadio" class="contact-form__radio__button" value="個人" required>
                                    <span>個人</span>
                                </label>
                            </div>Ï
                        </div>
                    <div class="contact-form__submit">
                        <input type="submit" value="送信" class="contact-form__submit__button" id="contact-form__submit__button" disabled>
                    </div>
                </form>

$(function () {
    let $submit = $('#contact-form__submit__button');
    $('#js-form input,#js-form textarea').on('change',function () {
        if (
            $('#js-form input[name="yourRadio"]').prop('checked') === true
        ) {
            $submit.addClass('is-active');
            $submit.prop('disabled',false);
        }
        else{
            $submit.removeClass('is-active');
            $submit.prop('disabled',true);
        }
    });
});

Answer 1

if (
  $('#js-form input[name="yourRadio"]').prop('checked') === true
) {
  ...

ここの$('#js-form input[name="yourRadio"]').prop('checked')
は常に最初の方のラジオボタン（法人のラジオボタン）のチェックの状態を見ています。

検証してみましょう。例のif文の上の行に、次の処理を追加して、検証ツールで値を確認してみましょう。

$('#js-form input,#js-form textarea').on('change',function () {
  // ↓これを追加してみましょー！タグのvalueの値を見ることができます
  console.log($('#js-form input[name="yourRadio"]').val())

  if (
    $('#js-form input[name="yourRadio"]').prop('checked') === true
  ) {

チェックボックスを切り替えてもコンソールに出力される値は絶対に「法人」になっていることを確認できると思います。
このことから、if文で評価されるラジオボタンは常に「法人」のラジオボタンになるので、

・ 法人をチェックしたらtrue　=> is-activeが追加され、ボタンが有効になる
・ 個人をチェックしたら法人のチェックが外れるのでfalse　=> is-activeが削除され、ボタンが無効になる

となります。これが現在発生している問題の真相です。

じゃあどうすればいいのでしょうか？いろいろやり方は思いつくところですが、一番シンプルなのは$.fn.oneを使う方法ではないでしょうか？$.fn.oneは、$.fn.onと同じようにイベントを定義するメソッドですが、１度しか発火しません。

これを使って書く場合、下記の通りになります。また、ラジオボックスのinputタグにcheckedをつけていると思いますが、これは外して初期状態は何も選択されていない状態にしましょう。

$(function () {
  // 値を変更する予定がない時はletではなくconstを使うことをお勧めします。
  const $submit = $('#contact-form__submit__button');
  // ラジオボタンの状態が1回切り替わったらボタンを有効にする
  $('#js-form input[type=radio]').one('change', () => {
    $submit.addClass('is-active');
    $submit.prop('disabled',false);
  })
})

Comments

[nakamitsu827]

とても丁寧に回答していただきありがとうございます！
確かに、web制作ではそこまでjQueryを書く量って少ないから、constで定義したほうがいいですね。
ukyodaさんのおっしゃるとおり、console.logで出力してみるたら、法人の方しか出力できませんでした。ですが、ukyodaさんが紹介してくださったoneメソッドというものを使ったら、解決できました！
本当にありがとうございました！勉強になりました。

あと自分でも、他に解決策がないか調べてみたら、if文の中身を「$("#js-form input[type='radio']:checked").prop('checked') === true」にしてみたら、一応反応するようになりました。