each循环内使用jQuery.prop()无法改变复选框GUI状态求助

嘿，这问题我之前做项目时也踩过坑！你遇到的情况大概率是原生复选框被UI框架/自定义CSS美化过导致的，下面给你拆解原因和解决办法：

核心原因 #

很多前端框架（比如Bootstrap、jQuery UI，或者自定义的样式组件）会把原生的<input type="checkbox">隐藏（比如设为display: none），然后用<label>、<span>之类的元素模拟视觉上的复选框效果。这种情况下：

• 直接用$.prop('checked', true/false)只会修改原生复选框的状态，但UI框架并没有监听原生属性的变化，所以视觉上没反应；
• 而click()会触发原生的点击事件，框架绑定的监听函数会同步更新模拟的UI元素，所以界面能正常变化。

解决办法 #

1. 设置prop后手动触发change事件 #

这是最直接的解决方案，修改完原生状态后，触发change事件让UI框架感知到变化：

// 勾选状态
$("#"+feedname).prop('checked', true).trigger('change');
// 取消勾选状态
$("#"+feedname).prop('checked', false).trigger('change');

或者简写用change()方法，效果完全一致：

$("#"+feedname).prop('checked', true).change();

2. 尝试原生DOM操作（备选方案） #

如果jQuery的prop还是有奇怪的问题，可以直接操作原生DOM元素，再触发事件：

const checkbox = document.getElementById(feedname);
checkbox.checked = true;
// 触发change事件
checkbox.dispatchEvent(new Event('change'));

3. 排查是否有其他代码干扰 #

偶尔也会遇到其他事件监听函数在你设置状态后又把checked改回去的情况，你可以在设置prop之后立刻用console.log($("#"+feedname).prop('checked'))确认状态，或者用Chrome DevTools的断点调试，看看后续有没有代码修改这个值。

内容的提问来源于stack exchange，提问作者Andre Elrico