jQueryで特定のラジオボタンのみを対象にしたい

Question

#※原因が判明したので下部に追記しました！

##jQueryで特定のラジオボタンのみを対象にしたい

とあるお申込みフォームページで以下のjQueryを実行すると、お申込みフォームページ内の全てのラジオボタンが disabled になると思います。

$(function(){
	$('input[type="radio"]').prop('disabled',true);
});

これでページ内にある以下のラジオボタン

<input type="radio" class="class-age" name="age" value="10代" checked="checked" />
<input type="radio" class="class-age" name="age" value="20代" />

<input type="radio" class="class-gender" name="gender" value="男性" checked="checked" />
<input type="radio" class="class-gender" name="gender" value="女性" />

<input type="radio" class="class-people" name="people" value="1人" checked="checked" />
<input type="radio" class="class-people" name="people" value="2人以上" />

の全ては disabled になると思いますが、ここで

<input type="radio" name="people" value="1人" checked="checked" />
<input type="radio" name="people" value="2人以上" />

の部分だけは disabled にしたくないとします。その場合はどう記述すれば良いのでしょうか？

##以下のようにすればいけるのでは？
と思い実行してみたものの、disabledにすらならず……。

$(function(){
	$('.class-age, .class-gender').prop('disabled',true);
});

どなたかお教えいただければ幸いです。
よろしくお願いいたします。

---

##【原因が判明しました】そして新たな問題が……
コメント欄より（nullpot様より）ご指摘がございまして、原因が判明しました。
上記のやり方であっていたようなのです。では何がいけなかったのかと言いますと、

<input type="radio" name="people" value="1人" checked="checked" />
<input type="radio" name="people" value="2人以上" />

の部分なんですが、あくまで参考用といいますか例文でして。私が勝手に考えたものだったんです。
実際にはwordpressのcontact form 7で作成しており、このコードではなく、以下の**[ショートコード]**を記入していました。

[radio age class:class-age use_label_element default:1 "10代" "20代"]
[radio gender class:class-gender use_label_element default:1 "男性" "女性"]
[radio people class:class-people use_label_element default:1 "1人" "2人以上"]

それを実際に表示させた場合、次のようなソースコードになっていました。
※ とりあえずage（10代・20代）のみ以下に表示

<span class="wpcf7-form-control-wrap age">
	<span class="wpcf7-form-control wpcf7-radio class-age">
		<span class="wpcf7-list-item first">
			<label>
				<input type="radio" name="age" value="10代" checked="checked" />
				<span class="wpcf7-list-item-label">10代</span>
			</label>
		</span>
		<span class="wpcf7-list-item last">
			<label>
				<input type="radio" name="age" value="20代" />
				<span class="wpcf7-list-item-label">20代</span>
			</label>
		</span>
	</span>
</span>

###class="class-age"が<input type="radio"...のところに入ってない！
なんということでしょう、なんかよーわからん<span>の部分にclass-ageが入っているではないですか。
これが原因でした。なんだこれは……これならうまくいかなかったのも頷けます。jQueryは悪くなかったんですね～。

###では一体どうすればいいのか？
恐らく以下のような感じにすればいいのでは？と思っていますが……これがわからないでいます。

$(function(){
	$('.class-ageの中（内側）にあるinput[type="radio"]要素').prop('disabled',true);
});

あとちょっとでゴールまで行けそうなんですが、簡単そうに見えて私の実力では残念ながらクリアできないという……。
どなたかお教え願えませんでしょうか？

Answer 1

こんにちは

$('.class-ageの中（内側）にあるinput[type="radio"]要素').prop('disabled',true);

上記を（.class-gender の中にある も加えて）書けば、以下です。

$('.class-age input[type="radio"], .class-gender input[type="radio"]').prop('disabled',true);

• **動作確認用 CodePen: **https://codepen.io/jun68ykt/pen/wvwYeGX?editors=1111

Comments

[tartnac]

$('.class-age > input[type="radio"], .class-gender > input[type="radio"]').prop('disabled',true);

のようにやって「やっぱりこれじゃ無理か～」とか思ってたんですが、あああ！そうか、そうですよね！
なんでわからなかったんだろう……ありがとうございます、無事に動きました！！

[jun68ykt]

@tartnacさん
どういたしまして。
> 無事に動きました！！
とのことで、よかったです????

Answer 2

以下のようにサンプルを作成したところ、再現しませんでした(動いてしまいました)

<input type="radio" class="class-age" name="age" value="10代" checked="checked"/>
<input type="radio" class="class-age" name="age" value="20代"/>


<input type="radio" class="class-gender" name="gender" value="男性" checked="checked"/>
<input type="radio" class="class-gender" name="gender" value="女性"/>

<input type="radio" class="class-people" name="people" value="1人" checked="checked"/>
<input type="radio" class="class-people" name="people" value="2人以上"/>


<script src="https://code.jquery.com/jquery-3.4.1.min.js"
		integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script>
    $(function () {
        $('.class-age, .class-gender').prop('disabled', true);
    });
</script>

Comments

[tartnac]

何ですって……ッ！？
すみません、ちょっと調べてみます！

[tartnac]

なるほど！原因が判明したっぽいです。ちょっと質問の文章に追記させていただきます！