javascript - 单击时切换图像和复选框状态

Question

检查这个小提琴，这里我在表中有一些被禁用的行，我表示被锁禁用。现在，如果您单击锁定，则文档将被解锁，这意味着复选框将被启用。我希望在此之后锁定图像应替换为打开的锁，以便用户可以知道文档未解锁。我需要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 演示

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