Reputation: 199
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
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