I am using metronic admin theme for one of my project.

I have to checked or unchecked check boxes on base of data from database but problem is that i am unable to checked or unchecked a check box in metronic theme using jquery. I have tried both ways to acplish this task using prop and attr but nothing is working for me. If I run the same code on my custom web page it's working perfectly fine.

$("#checkbox").prop("checked",true);
$("#checkbox").attr('checked',false);
$("#checkbox").attr('checked','checked');

I am using metronic admin theme for one of my project.

http://themeforest/item/metronic-responsive-admin-dashboard-template/4021469

I have to checked or unchecked check boxes on base of data from database but problem is that i am unable to checked or unchecked a check box in metronic theme using jquery. I have tried both ways to acplish this task using prop and attr but nothing is working for me. If I run the same code on my custom web page it's working perfectly fine.

$("#checkbox").prop("checked",true);
$("#checkbox").attr('checked',false);
$("#checkbox").attr('checked','checked');

• javascript
• jquery
• dom
• checkbox
• metronic

• Some time location of your code does matter. May be you are placing this code snippet at wrong place. can you show plete code snippet? – Atif Commented May 17, 2016 at 5:43
• "on my custom web page it's working", whats different from that page and the one its not working on? Are there errors in the console? Is the checkbox a custom element that wraps the actual <input> checkbox element, eg Polymer element? – Patrick Evans Commented May 17, 2016 at 5:44

4 Answers 4

If you are using metronic, try adding this line after the prop:

$.uniform.update();

Metronic theme uses uniform library to modify standard form element into fancy element. If you check or uncheck element using jquery, it is updated but it is not reflected on front-end. To update this action on front-end you need to update using uniform library.

$.uniform.update() restyles the element depending on updated action.

Best way for this problem add class for input checkbox when you are using in Angular Js loop.

This works perfectly:

I also use the metroic theme,but no such problems: I think the problem maybe is your 'unchecked' and 'checked' is not matching;my meaning is:you should

var checked = $(this).is(":checked");
$.each(function() {
  if (checked) {
     $(this).prop("checked", true);//or $(this).attr("checked", true);
  } else {
     $(this).prop("checked", false);//or $(this).attr("checked", false),can't use $(this).removeAttr('checked');
  }
});

if you use removeAttr,you should

$(this).attr('checked', 'checked');
$(this).removeAttr('checked');

if above all it don't work ,you can try:

$(this)[0].checked=true;// when I use ,find return array,so add [0];
$(this)[0].checked=false;

$(this).iCheck('uncheck');

or

$(this).iCheck('check');

can be found here