无法在 metronic 管理主题中使用 jquery 取消选中复选框答案

【问题标题】：Unable to check uncheck a checkbox using jquery in metronic admin theme无法在 metronic 管理主题中使用 jquery 取消选中复选框
【发布时间】：2021-05-01 13:42:14
【问题描述】：

我正在为我的一个项目使用 metronic 管理主题。

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

我必须根据数据库中的数据选中或取消选中复选框，但问题是我无法使用 jquery 选中或取消选中 metronic 主题中的复选框。我已经尝试了两种方法来使用 prop 和 attr 来完成这项任务，但没有什么对我有用。 如果我在我的自定义网页上运行相同的代码，它工作得非常好。

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

【问题讨论】：

代码的某个时间位置确实很重要。可能是您将此代码 sn-p 放置在错误的位置。你能显示完整的代码sn-p吗？
“在我的自定义网页上它正在工作”，与那个页面有什么不同，而那个页面没有工作？控制台中是否有错误？复选框是否是包装实际<input> 复选框元素的自定义元素，例如 Polymer 元素？

标签： javascript jquery dom checkbox metronic

【解决方案1】：

如果您使用的是 metronic，请尝试在 prop 后面添加此行：

$.uniform.update();

Metronic 主题使用统一库将标准表单元素修改为花哨元素。如果您使用 jquery 选中或取消选中元素，它会更新但不会反映在前端。要在前端更新此操作，您需要使用统一库进行更新。

$.uniform.update() 根据更新的操作重新设置元素的样式。

【讨论】：

@user2940935 如果您的问题已解决，请接受答案。
您应该添加说明为什么需要这样做。 “试试这个”的答案只教用户复制粘贴代码，而不了解根本原因和解决方案。
问题是由于异步调用。 $.uniform.update();在完成我的 ajax 调用之前被 metronic 调用。实际上，当您调用 $.uniform.update() 时，它只是重新设置已收集的元素的样式。
非常感谢。我在这个问题上挣扎了几个小时，然后想知道这是否与 Metronic 有关。再次感谢。我欠你一杯啤酒。
非常感谢。你帮了我们很多！ :)

【解决方案2】：

当您在 Angular Js 循环中使用时，为输入复选框添加类的最佳方法。

这很好用：

【讨论】：

嗨，欢迎来到 Stackoverflow。将代码放在您的答案中 i.o 提供屏幕截图，复制和粘贴会更容易
这个问题与选择器无关，JQuery 选择器工作正常，实际上复选框被选中，但在 GUI 上它的状态没有改变，因为 Metronic 主题使用统一库将标准表单元素修改为花哨元素.

【解决方案3】：

我也用metroic主题，但没有这样的问题：我认为问题可能是您的“未检查”和“已检查”不匹配；我的意思是：你应该

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');
  }
});

如果你使用 removeAttr，你应该

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

如果还是不行，你可以试试：

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

【讨论】：

谢谢，在 metronic 主题中 $.uniform.update();选中或取消选中后需要更新 ui。

【解决方案4】：

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

或

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

可以找到here

【讨论】：