jQueryでチェックを判定し活性化する入力欄

Question

###前提・実現したいこと
ラジオボタンにチェックを入れると活性化し、同じname属性の別ラジオボタンにチェックを入れると非活性化する入力欄を作りたい。

###発生している問題・エラーメッセージ
ラジオボタンにチェックを入れると活性化までは問題なく実装できたが、同じname属性の別ラジオボタンにチェックを入れると非活性化の動きがうまくいかない。

####動くサンプル
radioBにチェックを入れるとdisabled属性が取り除かれるが、radioAにチェックを入れてもdisabled属性が付与されない。
https://jsfiddle.net/v2wvc78c/6/

###該当のソースコード

<label for="dl04">
  <input type="radio" name="dlRange" id="dl04"> radio1
</label>

<label for="dlRangeRadio01">
  <input type="radio" class="js-check-to-activate" name="dlRange" id="dlRangeRadio01"> radio2
</label>
<label for="dlRangeCal01" class="u-mr-0">
  <input type="number" min="1" class="condition__field--small js-active-field" name="dlRangeCal" id="dlRangeCal01" disabled> input
</label>

"use strict";
$(function() {
  var radio = $('input[type="radio"].js-check-to-activate');
  var field = $(".js-active-field");
  radio.on("change", function() {
    if (radio.prop("checked") === true) {
      field.prop('disabled', false);
    } else {
      field.prop('disabled', true);
    }
  });
});

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery3.2.1

よろしくお願いいたします。

Answer 1

こんな感じじゃないですか？

$(function() {
  $('input[type="radio"][name=dlRange]').on("change", function() {
    $(".js-active-field").prop('disabled', $(this).filter(':checked').hasClass('js-check-to-activate'));
  });
});

Answer 2

セレクタがradio（$('input[type="radio"].js-check-to-activate')）になってますのでラジオボタンに共通のクラスを与えてセレクタに指定するか、下記のように変更してください。

修正前

radio.on("change", function() {

修正後

$('input[name="dlRange"]').on("change", function() {

Comments

[hibikikudo]

ありがとうございます。盲点でした。