Переключить изображение и установить флажок в поле

Question

Отметьте это 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"; 
    }); 

Answer 1

Попробуйте это:

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 2

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

JSFIDDLE DEMO

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