複数チェックボックスでそれぞれに対応したテキストボックスの有効/無効を切り替えたい

Question

いつもこちらでお世話になっています。
jQuery学習中です。
下記のサイトのサンプル３のように、チェックボックスを選択したら
隣りのテキストボックス有効/無効にできるようにしたいです。
https://lightning-bolt.xyz/js/jquery.tgCheckboxControllDisable/

自分なりにコードを考えてみましたが、チェックをすると全てのテキストボックスが有効になってしまいます。
解決方法をご教示ください。

<div><!-- display:float;で両サイドに配置 -->
  <div><!-- Group1 -->
    <label>
	<input id="fI_11" type="checkbox" name="checked[]" value="りんご">
	 <span>りんご</span>
     </label>
     <label>
	<input id="fI_11" type="checkbox" name="checked[]" value="みかん">
	 <span>みかん</span>
     </label>
     <label>
	<input id="fI_11" type="checkbox" name="checked[]" value="メロン">
	 <span>メロン</span>
     </label>
  </div>
 
 <div><!-- Group2 -->
   <p><input id="fI_12" type="text"　name="number[]" value="" disabled="disabled"> 個</p>
   <p><input id="fI_12" type="text"　name="number[]" value="" disabled="disabled"> 個</p>
   <p><input id="fI_12" type="text"　name="number[]" value="" disabled="disabled"> 個</p>
 </div>
<div>

$(function() {
 $('input[name="checked[]"]').change(function() {
  if ( $(this).is(':checked') ) {
   $('input[name="number[]"]').prop('disabled',false);
   } else {
   $('input[name="number[]"]').prop('disabled',true);
   }
  });
});

Answer 1

checked[]とnumber[]が順番で1対1にリンクしているなら

<script>
$(function(){
  $('#hoge [name="checked[]"]').on('change',function(){
    $('#hoge [name="number[]"]').eq($('#hoge [name="checked[]"]').index(this)).prop('disabled',!$(this).prop('checked'));
  }).trigger('change');
});
</script>
<div id="hoge">
  <div>
    <label>
    <input type="checkbox" name="checked[]" value="りんご">
     <span>りんご</span>
     </label>
     <label>
    <input type="checkbox" name="checked[]" value="みかん">
     <span>みかん</span>
     </label>
     <label>
    <input type="checkbox" name="checked[]" value="メロン">
     <span>メロン</span>
     </label>
  </div>

 <div>
   <p><input type="text" name="number[]" value="" disabled="disabled"> 個</p>
   <p><input type="text" name="number[]" value="" disabled="disabled"> 個</p>
   <p><input type="text" name="number[]" value="" disabled="disabled"> 個</p>
 </div>
</div>

Comments

[yambejp]

ちなみに例示のnumber[]のinputですが、nameの前の空白が全角のスペースになっていてこれが悪さしているのでよくよく気をつけて下さい

[akinco]

ご忠告ありがとうございます！
望んだ動作ができました(*´∇｀*)

Answer 2

ある程度コードが書けるようなのでヒントだけ。

• 1つのチェックボックスと、1つのテキストフィールドの関連付けをするための名前を付けて、jQueryのセレクターで指定するように変更すれば実現出来ると思います。
• id属性はページでユニークになる必要があります。