禁用複選框一會兒

Question

當用戶選中或取消選中某個複選框時，我會進行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); 
        } 
       }); 
      }); 

Answer 1

首先，你需要禁用的複選框：

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

接下來，你需要undisable它在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/

Answer 2

你只需要禁用複選框，當他們點擊它，然後點擊後刪除了禁用。

$('.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); 
        } 
       }); 
      });