Pbscript

マルチルームチャット、ダイスチャット等のPHPスクリプトを配布

trを囲んだformの要素を選択する

      2015/10/09

jQueryのセレクタに不慣れなので毎度新しい指定には悩まされます。
テーブルで中に行ごとにformを書いた場合、チェックボックスにチェックを入れると同じformのinputのreadonlyを外す(編集可能にする)にはどうしたらいいのかと色々調べて試行錯誤してようやくできたのでメモ。

<tr>を<form>

で囲むのは文法的にはあまりよろしくないのか(?)parentsでformを探せなかったので、trを探してその中のinputを指定するという流れに。

HTML

<table>
<form>
<tr>
<td><input type="text" ~></td>
<td><input type="checkbox" class="counter_edit" value=1></td>
</tr>
</form>
<form>
<tr>
<td><input readonly type="text" ~></td>
<td><input type="checkbox" value=1></td>
</tr>
</form>
.
.
</table>
$(function(){
    $(".counter_edit").click(function(){
        editCheckVal = $(this).filter(':checked').val();
 
        if (editCheckVal == "1") {
			$(this).parents("tr").find("input").attr('readonly', false);
			$(this).parents("tr").find("input").addClass("number_edit");
        } else {
			$(this).parents("tr").find("input").attr('readonly', true);
			$(this).parents("tr").find("input").removeClass("number_edit");
        }
    });
});

「jquery テーブル 行ごと form」「jquery this 親要素の子要素」とかで検索して見つけきれなかったのでめもめも。

 - jQuery, メモ

  関連記事

IMG_0815
jQueryでアラートを表示する

・テキストボックスからフォーカスが外れた時 ・ボタンを押したとき(id指定) ・ …

no image
WordPressでカテゴリーごとの記事タイトルを一覧にする方法

カテゴリーごとの記事を一覧にできるプラグインです。 List category …