【jQuery】フォーム内でラジオボタンの選択によって操作可否にさせるパーツをページ上に複数設定することができない

Question

前提・実現したいこと

お問い合わせフォームを作成しているのですが、入力欄にラジオボタンによって追加項目のテキスト・プルダウンの操作可否を複数設定することができずにいます。
フォーム内に1つの場合はうまく動作するのですが、複数ですと連動して動いてしまいます。

操作可否の参考サイトはこちらになります。
動作チェックはこちらになります。

ご教示いただけますと幸いです。
よろしくお願いいたします。

該当のソースコード

<table>
<tr>
<th>経験</th>
<td>
<ul class="list_btn-2">
<li><label class="label"><input type="radio" name="experience" value="なし">なし</label></li>
<li><label class="label"><input type="radio" name="experience" value="あり">あり</label></li>
</ul>

<p style="margin-top:2em;">あるとお応えの方</p>
<input type="text" class="field textControl1" name="experience_month" disabled="disabled"
style="width:60px; text-align: center; margin-top:0;">年
</td>
</tr>

<tr>
<th>決断予定</th>
<td>
<ul class="list_btn-2">
<li><label class="label"><input type="radio" name="decision" value="決まっていない">決まっていない</label></li>
<li><label class="label"><input type="radio" name="decision" value="決まっている">決まっている</label></li>
</ul>

<p style="margin-top:2em;">決まっているとお応えの方</p>
<select class="select textControl2" name="decision_month" value="" disabled="disabled">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
月頃
</td>
</tr>
</table>

$(function() {

$('input[name="experience"], input[name="decision"]').change(function() {
var textControl1 = $('input[name="experience"]').prop('disabled');
var textControl2 = $('input[name="decision"]').prop('disabled');

if (textControl1 || textControl2 ) {
$('.textControl1, .textControl2').prop('disabled', true);
} else {
$('.textControl1, .textControl2').prop('disabled', false);
}
return true;
});


});

Answer 1

解決しました！

解決方法

他クラスに対して同処理ができればと思ったのですが、断念しそれぞれのクラスに対して処理を設定しました。
本当は同処理ができればいいのですが。。

閲覧していただき、ありがとうございました。

動作チェック

https://jsfiddle.net/nm6vrbst/

該当のソースコード

<table>
<tr>
<th>経験</th>
<td>
<ul class="list_btn-2 blank_list">
<li><label class="label"><input type="radio" name="経験" value="なし">なし</label></li>
<li><label class="label"><input type="radio" name="経験" value="あり">あり</label></li>
</ul>

<p style="margin-top:2em;">あるとお応えの方</p>
<input type="text" class="field disabled_2 blank_input" name="経験年月" style="width:60px; text-align: center; margin-top:0;" disabled>年
</td>
</tr>

<tr>
<th>決断予定</th>
<td>
<ul class="list_btn-2 plan_list">
<li><label class="label"><input type="radio" name="決断予定" value="決まっていない">決まっていない</label></li>
<li><label class="label"><input type="radio" name="決断予定" value="決まっている">決まっている</label></li>
</ul>

<p style="margin-top:2em;">決まっているとお応えの方</p>
<select class="select disabled_1" name="決断予定月" value="" disabled>
<option value="" selected>選択してください</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
月頃
</td>
</tr>
</table>

$('.plan_list input[type=radio]').change(function() {

    var radioval = $(this).val();
    if (radioval == "決まっている") {
        $('.disabled_1').removeAttr('disabled');
    } else {
        $('.disabled_1').attr('disabled', '');
    }
});

$('.blank_list input[type=radio]').change(function() {

    var radioval = $(this).val();
    if (radioval == "あり") {
        $('.disabled_2').removeAttr('disabled');
    } else {
        $('.disabled_2').attr('disabled', '');
    }
});