單擊時切換圖像和復選框狀態

Question

檢查這個小提琴 ，這里我在表中有一些禁用的行，我通過鎖表示禁用。 現在，如果你點擊鎖定，那么doc將被解鎖意味着復選框將被啟用。 我希望在此之后鎖定圖像應該用打開的鎖替換，以便用戶可以知道doc沒有解鎖。 我需要toggle選項，例如當用戶點擊鎖定時，圖像應該更改為解鎖，如果用戶點擊解鎖圖像，則應將其更改為鎖定，復選框應禁用。

我正在使用$( this ).remove(); 要刪除鎖定部分，我需要toggle功能。 我嘗試了以下但它沒有用。

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

Answer 1

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

JSFIDDLE DEMO

Answer 2

嘗試這個：

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

Answer 3

嘗試這個，

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