質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

2025閲覧

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

nakamitsu827

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/10/10 13:13

前提・実現したいこと

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

ここに質問の内容を詳しく書いてください。
2つあるラジオボタンの中から一つ選択したら、フォーム内のボタンに違うクラスを与えたいのですが、なぜか1つ目のラジオボタンにしか反応しなくて困っています。
もしフォームに詳しい方がいましたら、ご教授願います。

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

 HTML

<form action="" class="contact-form"> <div class="contact-form__radio contact-form__row"> <label> <input type="radio" name="your-radio" class="contact-form__radio__button" value="法人" id="contact-form__radio__button" checked> <span>法人</span> </label> <label> <input type="radio" name="your-radio" class="contact-form__radio__button" value="個人" id="contact-form__radio__button" checked> <span>個人</span> </label> </div> <div class="contact-form__submit"> <input type="submit" value="送信" class="contact-form__submit__button" id="contact-form__submit__button" disabled> </div> </form>

jQuery
$(function () {
let $submit = $('#contact-form__submit__button');
$('form input,form textarea').on('change', function () {
if (
$('form input[type="text"]').val() !== "" &&
$('form input[type="email"]').val() !== "" &&
$('form textarea').val() !== "" &&
$('form input[name="your-radio"]').prop('checked') === true
) {
$submit.addClass('is-active');
$submit.prop('disabled',false);
}
else{
$submit.removeClass('is-active');
$submit.prop('disabled',true);
}
});
});

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

let $submit = $('#contact-formsubmitbutton');

#contact-formsubmit__button ではないでしょうか。

投稿2021/10/10 13:26

itagagaki

総合スコア8402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nakamitsu827

2021/10/10 13:28

ご回答ありがとうございます。 そこはおそらくterarailの仕様で勝手に改行されたようです。
nakamitsu827

2021/10/10 13:30

1つ目の法人の方を選択するとボタンにis-activeクラスがつくのですが2つ目の個人を選択するとis-activeクラスが取れてしまうような感じです・
itagagaki

2021/10/10 13:31

どういうことですか? 私が指摘したのは、 contact-formsubmitbutton は誤りで、 contact-formsubmit__button が正しいのではないですか?ということなのですが。
nakamitsu827

2021/10/10 13:37

すいません、私がさっき返信したのは  わたしが元々入力していたHTMLは <input type="submit" value="送信" class="contact-form__submit__button" id="contact-form__submit__button" disabled> です。 なのでそこは問題なさそうです。
itagagaki

2021/10/10 13:42

質問を編集して、コードをきちんと ``` ``` で囲ってください。そうすれば正しくフォーマットされます。
nakamitsu827

2021/10/10 13:47

ご指摘いただきありがとうございます。 分かりづらいコードですいません。。 次から気をつけます。
itagagaki

2021/10/10 13:51

次からでなくて、この質問を編集していただかないことには、コードをレビューできないので回答のしようがないんですけど…
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問