Jquery中使用prop()方法决属性设置不生效问题

Jquery中使用attr()方法动态设置多选框被选中状态时不生效或需要操作多次方可生效的问题可通过prop()替代完成,当需要设置html原生属性时最好使用prop()方法来进行操作

Jquery中使用prop()方法决属性设置不生效问题

所属分类: WEB
专题标签: Jquery 属性 方法

问题说明

在前端界面中涉及到多个勾选框级联的时候,一开始采用Jquery常见的.attr()方法。
实际开发自测过程中发现有时候无法生效,或需要多次触发才会生效。
而在Jquery1.8官方文档中的举同样例子的时候使用的是.prop()方法。

方法介绍

prop()方法

prop()方法:设置或返回被选元素的属性和值。

  • 当该方法用于返回属性值,则返回第一个匹配元素的值
  • 当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对
  • 方法操作radio(checkbox)之类的控件,让其选中的时候,其控件选中的值也会随之改变,即既可以控制其选中,也能控制其取消选中

attr()方法

attr()方法:设置或返回被选元素的属性和值。

  • 当该方法用于返回属性值时,则返回第一个匹配元素的值
  • 当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对
  • 方法操作adio(checkbox)之类的控件,让其选中的时候,其控件选中的值不会随之改变,即只能控制其选中,不能控制其取消选中

原因分析

从官方文档的描述来看,attr()应当也能够正常触发选择框的选中,实际应用发现有可能无效。

  1. 添加属性名称该属性就会生效应该使用prop()
  2. 特别是true,false两个属性使用prop()(如checked、selected、disabled等)
  3. 其他则使用attr()如自定义的一些属性(如data-val等)

替换案例

  1. //勾选
  2. //旧写法
  3. $("#ID").attr("checked","checked");
  4. //新写法
  5. $("#ID").prop("checked","true");
  6. //去勾选
  7. //旧写法
  8. $("#ID").attr("checked",false);
  9. //新写法
  10. $("#ID").removeAttr("checked");
  11. //获取checkbox的选中状态
  12. //旧写法
  13. //返回结果始终是undefined
  14. $(".check").attr("checked")
  15. //新写法
  16. //这两个语法的任意一个均获取到是否选中的结果true/false
  17. $(".check").prop("checked")
  18. $(".check").is(":checked")