使用JQuery的attr()方法给单选框添加属性并赋值时,确实可以赋值并改变单选框样式,但用removeAttr()再去移除却移除不掉,结果就是两个单选框都有checked= "checked"属性,导致单选框不改变。最后使用prop()方法解决了这个问题。
1、问题
<!-- Html代码,动态单选框 -->
<label>
是<input type="radio" disabled="" value="1" th:name="isResponse+${deviceInfo.deviceId}">
</label>
<label>
否<input type="radio" class="isResponse" disabled="" checked="checked" value="0" th:name="isResponse+${deviceInfo.deviceId}">
</label>
<!-- Js代码,触发响应状态,需要将另一个的属性做相反改变 -->
$("#isResponse" + data.deviceId + " [name='isResponse"+ data.deviceId +"'][value='1']").prop('checked',true);
$("#isResponse" + data.deviceId + " [name='isResponse"+ data.deviceId +"'][value='0']").prop('checked',false);
<!-- Js代码,重置所有单选框为否 -->
$(":radio[value='1']").prop('checked',false);
$(":radio[value='0']").prop('checked',true);
2、attr()与prop()方法区别
attr——attribute,prop——property,都是属性的意思,但在实际功能上是有区别的。
用法简单来说,根据JQuery官方的建议,具有true和false两种状态的属性,如checked、selected、disabled,使用prop()方法,其他则使用attr()方法。
具体的不同这篇就写的很好,作为参考:https://blog.csdn.net/tel13259437538/article/details/84639431