javascript ファイルが選択されたいない場合送信ボタンをグレーアウト

Question

 <th colspan="2" class="btn_th"><input type="submit" class="submit" id="submitBtn" value="投稿"/></th>

success: function(imageData, status, xhr) {
                            var res = {};
                            try {
                                res = $.parseJSON(xhr.responseText);
                            }catch (e) {}
                            $("#image-files ul").append("<img class='imgView' src=\"" + res.img + "\" data-imgid=\"" + res.img_id + "\"/ >");
                            $('<input>').attr({
                                type: 'textarea',
                                name: "body["+res.img_id+"]",
                                value: "",
                                size: 30,
                                maxlength: 140,
                                "data-imgid": res.img_id
                            }).appendTo("#image-files div");
                            $('<input>').attr({
                                "class" : "deleteBtn",
                                type: "button",
                                name: res.img_id,
                                value: "削除",
                                "data-imgid": res.img_id
                            }).appendTo("#image-files div");
                        },

画像選択した後に削除を押下してajaxで作成した「body」に１つもデータがない場合に
$('#submitBtn').attr('disabled', 'disabled');
をグレーアウトさせたいのですが

        var body = bodyの値を取得

        if(body == ""){
            $('#submitBtn').attr('disabled', 'disabled');
        }

のように書けばグレーアウトできると思うのですが
ajaxでbodyの作成したデータの有無をどうやって確認すればいいのでしょうか？

Comments

[x_x]

日本語がわからないです。bodyとは何を指していますか？

[amaguri]

ajaxのsuccess時にbodyというフォームの作成をしています

Answer 1

簡単に判断できそうなところで判断すればいいのです。
アップロードするごとに画像を追加して、削除ボタンを押したら画像も消してますよね？
画像の数で判断すればいいと思いますよ。
ついでに突っ込むと、attrじゃなくてpropを使いましょう。

if ($("#image-files ul img").length == 0){
    $('#submitBtn').prop('disabled', true);
}

Comments

[amaguri]

ありがとうございます。
試して見たのですがボタンがグレーアウトされませんでした。。

[zohnam]

disabled,checkedのような状態は全てpropで扱うのが望ましいのですが、すでに他にattrで設定している箇所などがあるようでしたら、混在しないほうがいいですね。propじゃなくてattrでやってみてください。

[amaguri]

if ($("#image-files ul img").length == 0){
$('#submitBtn').attr('disabled', 'disabled');
}
でやって見たのですが同じ結果でした。。

[zohnam]

console.log(["length",$("#image-files ul img").length]);
if ($("#image-files ul img").length == 0){
console.log("disabled");
$('#submitBtn').prop('disabled', true);
}

こういう感じで、imgの数があってるのか、disabled設定をしようとしているのか、確認してみてください。

[amaguri]

確認して見ます！

[amaguri]

Array(2)0: "length"1: 0length: 2__proto__: Array(0)
と出ていました

[amaguri]

画像を選択後削除ボタンを押下の場合はグレーアウトの動作が動いていなかったです。
ページを読み込んださいよの段階ではいただいたソースコードでグレーアウトしているのを確認できました

[amaguri]

$('body').on('click', '.deleteBtn', function(evt) {
}
の中に記述する事にて解決できました！