切換圖片和複選框狀態點擊

檢查此fiddle，在這裏我有一些表中的行被禁用，我表示禁用鎖。現在，如果你點擊鎖定，doc將被解鎖，意味着複選框將被啓用。我希望在這之後，鎖定圖像應該被打開的鎖取代，以便用戶可以知道文檔沒有解鎖。我需要toggle選項，當用戶點擊鎖定時，圖像應該改爲解鎖，並且如果用戶點擊解鎖圖像，則應該將其更改爲鎖定，並且應該禁用複選框。切換圖片和複選框狀態點擊

我正在使用$(this).remove();刪除鎖定部分，那裏我需要toggle功能。 I tried the below但它沒有奏效。

$("a.add_me").toggle(function(){ 
    $(this).hide(); 
    this.src = "http://icons.iconarchive.com/icons/led24.de/led/16/lock-unlock-icon.png"; 
    }, function() { 
    $(this).show(); 
    this.src = "http://media.videolectures.net/rel.1369417430//icons/lock.png"; 
    });

來源

2013-08-30 Chankey Pathak

試試這個：

var unlock = 'http://icons.iconarchive.com/icons/led24.de/led/16/lock-unlock-icon.png'; 
var lock = 'http://media.videolectures.net/rel.1369417430//icons/lock.png'; 
$("a.add_me").data('lock', true).on("click", function(event) { 
    var $this = $(this); 
    if ($this.data('lock')) { 
     $this.find('img').attr('src', unlock); 
     $this.prev().prop('disabled', false); 
     $this.data('lock', false); 
    } else { 
     $this.find('img').attr('src', lock); 
     $this.prev().prop('disabled', true); 
     $this.data('lock', true); 
    } 
});

JSFIDDLE

來源

2013-08-30 07:00:56 jcubic

$("#infoToggler").click(function() { 
    $(this).find('img').toggle(); 
});

JSFIDDLE DEMO

來源

2013-08-30 06:50:29

你的答案也有幫助，謝謝你的提示。 –

試試這個，

if($(this).find('img').hasClass('unlock_image')){ 
    $(this).find('img').removeClass('unlock_image').addClass('lock_image'); 
    $(this).find('img').attr('src','http://icons.iconarchive.com/icons/led24.de/led/16/lock-unlock-icon.png'); 
    } 
    else{ 
     $(this).find('img').attr('src','http://media.videolectures.net/rel.1369417430//icons/lock.png'); 
     $(this).find('img').removeClass('lock_image').addClass('unlock_image'); 
    };

來源

2013-08-30 07:05:47

切換圖片和複選框狀態點擊

回答

相關問題