テーブル上のチェックボックスにチェックがされない

質問

データベースからメール送信履歴を検索し、結果をリスト表示しようとしています。
Ajax通信をして結果をJsonで受け取っています。
送ったか否かは「sendF」に書かれており、「0」なら未送信、「1」なら送信済みです。

「sendF」が「1」ならチェックボックスにチェックを入れようと思って
以下のコードを書きました。

でも、テーブル上のチェックボックスにはチェックが入りません。
console.logで数値が「1」を確認していますが、表示がされません。

どこが悪いか教えて頂けるとうれしいです。

よろしくお願いします。

$.ajax({
type: "POST",
url: "../SendList.php",
data: {"condition":condition}, // Webサーバに送信するデータ
dataType: 'text', // Webサーバか受信するデータの形式

success: function(request){ // ajax通信が成功したときの処理
var json = JSON.parse(request);
var res = '';

for (var i = 0; i < json.length; i++){

res += '<tr>'
+ '<td style="text-align: center;">' + json[i].personId + '</td>'
+ '<td style="text-align: center;">' + json[i].personName + '</td>'
+ '<td style="text-align: center;">'
+ '<input type="checkbox" id="sendF[' + i + ']" name="sendF" />'
+ '</td >'
+ '<td style="text-align: left;>'
+ '<input type="text" id="memo" name="memo" value="' + json[i].memo + '" />'
+ '</td >'
+ '</tr>';

if(json[i].sendF == 1){
$('#sendF[' + i + ']').prop('checked', true);
console.log("１でした");
}
}
var obj = document.getElementById("datatable");
obj.innerHTML ='<tr><th>担当者ID</th><th>担当者名</th><th>送信F</th><th>メモ</th></tr>'
+ res;

},

error: function(msg){ // ajax通信が失敗したときの処理
alert( "Data Saved: " + msg );
}
});

回答No.2

itu1989 · ベストアンサー

あまりAjaxやJSONの事は知りませんが、obj.innerHTMLでHTMLの内容を設定する前に「$('#sendF[' + i + ']').prop('checked', true);」を行っているからではないでしょうか？document上に出力されていないobjectには値は設定できません。

出力・設定の順番を変えれば設定はできると思います

ただ、今のままだと判定に使っている「json[i].sendF」をTABLE要素構成完了後に確認する為に再度ループしてチェックしなければいけません
(1)ループで行数分<tr>～</tr>を構成
(2)obj.innerHTMLに出力
(3)再度ループを回して「json[i].sendF」を確認し1なら「$('#sendF[' + i + ']').prop('checked', true);」を実行
となります。
2回ループを回すのは勿体無い！と思います。

なので素直にTABLE要素構成中に「json[i].sendF == 1」を発見したらcheckedを設定する事にしてはいかがでしょうか？

res += '<tr>'
+ '<td style="text-align: center;">' + json[i].personId + '</td>'
+ '<td style="text-align: center;">' + json[i].personName + '</td>'
+ '<td style="text-align: center;">';
if(json[i].sendF == 1){
res += '<input type="checkbox" id="sendF[' + i + ']" name="sendF" checked />';
} else {
res += '<input type="checkbox" id="sendF[' + i + ']" name="sendF" />';
}
res += '</td >'
+ '<td style="text-align: left;>'
+'<input type="text" id="memo" name="memo" value="' + json[i].memo + '" />'
+ '</td >'
+ '</tr>';

お礼

素早い回答大変ありがとうございました。

確かに、まだ出力する前にそのオブジェクトの値を触ろうとしても
無理ですね。

教えて頂いた通り、テーブルの中に判断を入れたら
うまくいきました。

具体的な例まで書いて頂き、本当にありがとうございました。

回答No.1

Ogre7077

sendF[?] の要素を DOM に入る前に操作しているため、対象がなくて処理が無視されています
直すなら、innerHTML の後に操作するか、最初から res に checked を埋め込むかでしょう

お礼

おっしゃる通り、出力する前のオブジェクトに触ろうとしても
無理ですね。

素早い回答ありがとうございました。