4

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

http://themeforest.net/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 accomplish 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');
Asad
  • 498
  • 7
  • 21
  • Some time location of your code does matter. May be you are placing this code snippet at wrong place. can you show complete code snippet? – Atif May 17 '16 at 05: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 `` checkbox element, eg Polymer element? – Patrick Evans May 17 '16 at 05:44

4 Answers4

14

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.

vartika
  • 494
  • 2
  • 12
  • @user2940935 if your problem is solved then please accept the answer. – vartika May 17 '16 at 09:34
  • You should add a description of why this is needed. "Try this" answers only teaches users to copy paste code without understanding the underlying cause and solution. – Patrick Evans May 18 '16 at 01:38
  • Issue was due to async call. $.uniform.update(); was called by metronic before completion of my ajax call. Actually when you call $.uniform.update() it simply restyles those elements that were already collected. – Asad May 26 '16 at 13:15
  • Thanks so much for this. I was wrestling with this problem for several hours and then wondered if it was something to do with Metronic. Thanks again. I owe you a beer. – AnotherOther Oct 21 '16 at 10:29
  • Thank you so much. You helped us a lot! :) – Hani Feb 26 '20 at 01:33
1

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

This works perfectly:

this works perfectly

Ramil Aliyev 007
  • 4,437
  • 2
  • 31
  • 47
Yusif Karimov
  • 400
  • 5
  • 8
  • Hi, welcome to Stackoverflow. Place the code in your answer i.o providing a screenshot, it will be easier to copy & paste – bagerard Sep 05 '19 at 07:45
  • This issue is not related to selector , JQuery selector was working fine and in actual checkbox was checked but on the GUI it's status was not changed because Metronic theme uses uniform library to modify standard form element into fancy element. – Asad Sep 05 '19 at 08:01
0

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;
Anan
  • 328
  • 2
  • 14
  • Thanks, in metronic theme $.uniform.update(); was required after checked or unchecked to update ui. – Asad May 17 '16 at 09:11
0

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

or

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

can be found here

Regolith
  • 2,944
  • 9
  • 33
  • 50
Du Nguyễn Phan
  • 69
  • 8