0

ユーザーがチェックボックスをオンまたはオフにすると、ajax 呼び出しが行われ、設定の変更が保存されます。成功すると、設定が適用されたことをユーザーに通知する小さなラベルを表示し、フェードアウトします。チェックボックスをクリックしてからメッセージをフェードアウトするまで、チェックボックスを無効にしたいと思います。どうすればいいですか？

$('.role-checkbox').click(function () {
                var this_control = $(this);
                $.ajax({
                    url: _SITEURL + 'User/EnableDisableRole',
                    data: JSON.stringify({ data }),
                    contentType: "application/json;charset=utf-8",
                    type: 'POST',
                    success: function () {
                        var saved_label = $('<span class="label label-success">Saved</span>')
                            .hide().appendTo(this_control.parent()).fadeIn(500).delay(3000).fadeOut(500);

                    },
                    error: function () {
                        var saved_label = $('<span class="label label-important">Error Saving!</span>')
                            .hide().appendTo(this_control.parent()).fadeIn(500).delay(3000).fadeOut(500);
                    }
                });
            });
4

2 に答える 2

1

まず、チェックボックスを無効にする必要があります。

$(this).prop('disabled',true);

次に、fadeoutコールバックで無効にする必要があります。

var saved_label = $('<span class="label label-success">Saved</span>')
                  .hide()
                  .appendTo(this_control.parent())
                  .fadeIn(500)
                  .delay(3000)
                  .fadeOut(500, function(){
                      this_control.prop('disabled',false);
                  });

これがデモンストレーションです：http：//jsfiddle.net/ezENq/

于 2012-12-06T17:42:12.737 に答える
0

チェックボックスをクリックしたときに無効にし、クリックした後に無効にする必要があります。

$('.role-checkbox').click(function () {
                var this_control = $(this);
                this_control.prop("disabled","disabled");
                $.ajax({
                    url: _SITEURL + 'User/EnableDisableRole',
                    data: JSON.stringify({ data }),
                    contentType: "application/json;charset=utf-8",
                    type: 'POST',
                    success: function () {
                        this_control.removeProp("disabled");
                        var saved_label = $('<span class="label label-success">Saved</span>')
                            .hide().appendTo(this_control.parent()).fadeIn(500).delay(3000).fadeOut(500);

                    },
                    error: function () {
                        this_control.removeProp("disabled");
                        var saved_label = $('<span class="label label-important">Error Saving!</span>')
                            .hide().appendTo(this_control.parent()).fadeIn(500).delay(3000).fadeOut(500);
                    }
                });
            });
于 2012-12-06T17:42:26.943 に答える