單擊復選框更改帶有圖像的復選框

Question

我有一個項目，一旦用戶單擊復選框，便需要更改帶有圖像的復選框。 任何人都可以幫助我。

就目前而言，我只能在單擊復選框后禁用該復選框，

 $('.cuttingCheckbox').change(function() {
         if (this.checked) {
           this.setAttribute("disabled", true);
            $.post("process_class.php",{
            headmark : this.getAttribute("data-headmark"), 
            headmark_id : this.getAttribute("data-id"),
            columnType : this.getAttribute("data-column")});
         }
       });

Answer 1

如果要用圖像替換復選框，則可以使用replaceWith方法。

$(this).replaceWith('<img src="' + src + '"/>');

如果從服務器獲取src屬性的值，則應緩存該元素並使用post請求的回調函數：

$('.cuttingCheckbox').change(function() {
     if (this.checked) {
        var _this = this;
        this.disabled = true;
        $.post("process_class.php",{
            headmark    : this.getAttribute("data-headmark"), 
            headmark_id : this.getAttribute("data-id"),
            columnType  : this.getAttribute("data-column")
        }, function(data) {
             $(_this).replaceWith('<img src="' + data.src + '"/>');
        });
     }
});