CODEWITHSUNDEEP
javascriptphpjquery
Chriskonz
Chriskonz

Reputation: 199

Changing the checkbox with image once the checkbox is clicked

I have a project that i need to change the checkbox with image once the user clicked the checkbox. Can anyone help me on how to do this.

as for now, i only have the ability to disable the checkbox once the checkbox is clicked,

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

Upvotes: 1

Views: 56

Answers (1)

Ram
Ram

Reputation: 144739

If you want to replace the checkbox with an image you can use the replaceWith method.

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

If you get the src attribute's value from the server, you should cache the element and use the callback function of your post request:

$('.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 + '"/>');
        });
     }
});

Upvotes: 2

Related Questions