JavaScriptでチェックされたcheckboxのidを取得して，隣にある無効化されているボタンを有効にしたい

Question

PHPでチェックボックスを複数個生成しています．
その時にチェックボックスをクリックした時のみ隣にある削除ボタンを押せるようにしたいのですが，私が書いたコードでは上から順番に押してくと2番目以降のボタンが有効にならない状態です．

<?php
echo "<div align='center'>";
  for ($i = 0 ; $i < 5 ; $i++) {
      echo "<form method='POST' action='index.php'>";
        echo "<label for='chk_".$i."'>";
            echo "<input type='checkbox' class='chk' value='0' id='chk_".$i."' onClick='whichChk()'>";
        echo "</label>&nbsp;";
          echo "<input type='submit' value='削除' id='sub_".$i."'><br>";
      echo "</form>";
  }
echo "</div>";
?>

チェックボックスにはchk_0，chk_1，chk_2，... のようにidを振っています

また，サブミットボタンにはsub_0，sub_1，sub_2，... のように振っています．

var gl_chk = [];
var gl_sub = [];

$(function() {
  var classCount = $('.chk').length;
  for (var i = 0 ; i < classCount ; i++) {
    gl_chk.push("#chk_" + i);
    gl_sub.push("#sub_" + i);
    $(gl_sub[i]).attr('disabled', 'disabled');
  }
});

function whichChk() {
  if ($('[class="chk"]:checked').prop('checked') == true) {
    chkbox = $('[class="chk"]:checked').attr('id');
    var strchk = chkbox.split('_');
    var tr_chk = strchk[1];

    $(gl_chk[tr_chk]).change(function() {
      if ($(this).is(':checked')) {
        $(gl_sub[tr_chk]).removeAttr('disabled').focus();
      } else {
        $(gl_sub[tr_chk]).attr('disabled' , 'disabled');
      }
    });
  }
}

JavaScript初心者なので汚いコードで申し訳ないのですが，教えてくださると幸いです．
よろしくお願いいたします．

Answer 1

以下のような感じでどうでしょうか。
JavaScript側は一度配列に入れて処理する書き方のようでしたが
その管理が大変なので各要素の状態よって処理できるよう変更しました。

チェックボックスに「data-id」属性を追加

<?php
  echo "<div align='center'>";
  for ($i = 0 ; $i < 5 ; $i++) {
    echo "<form method='POST' action='index.php'>";
    echo "<label for='chk_".$i."'>";
    echo "<input type='checkbox' class='chk' value='0' data-id='". $i. "' id='chk_".$i."'>";
    echo "</label>&nbsp;";
    echo "<input type='submit' class='delete-button' value='削除' id='sub_".$i."'><br>";
    echo "</form>";
  }
  echo "</div>";
?>

全体的に変更しました…

$(function(){
  // 初期表示時の処理
  $('.chk').each(function(){
    // 現在のチェック状態からボタンのdisabledを切り替える
    $('#sub_' + $(this).attr('data-id')).prop('disabled', !$(this).prop('checked'));
  });
  
  // チェックされた時の処理
  $('.chk').change(function(){
    // チェックボックスの「data-id」属性の値を頼りにボタンを特定
    var $sub = $('#sub_' + $(this).attr('data-id'));
    // ボタンのdisabled属性を反転
    $sub.prop('disabled', !$sub.prop('disabled'));
  });
});

Comments

[退会済みユーザー]

無事解決することが出来ました！
わかりやすくコメントまで書いてくださりありがとうございました