JavaScriptでチェックされたcheckboxのidを取得して，隣にある無効化されているボタンを有効にしたい
- 評価
- クリップ 0
- VIEW 3,760
退会済みユーザー
PHPでチェックボックスを複数個生成しています．
その時にチェックボックスをクリックした時のみ隣にある削除ボタンを押せるようにしたいのですが，私が書いたコードでは上から順番に押してくと2番目以降のボタンが有効にならない状態です．
チェックボックスには
また，サブミットボタンには
JavaScript初心者なので汚いコードで申し訳ないのですが，教えてくださると幸いです．
よろしくお願いいたします．
その時にチェックボックスをクリックした時のみ隣にある削除ボタンを押せるようにしたいのですが，私が書いたコードでは上から順番に押してくと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> ";
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初心者なので汚いコードで申し訳ないのですが，教えてくださると幸いです．
よろしくお願いいたします．
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
以下のような感じでどうでしょうか。
JavaScript側は一度配列に入れて処理する書き方のようでしたが
その管理が大変なので各要素の状態よって処理できるよう変更しました。
チェックボックスに「data-id」属性を追加
全体的に変更しました…
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> ";
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'));
});
});投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.23%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2015/09/14 23:52
わかりやすくコメントまで書いてくださりありがとうございました