jQuery 的attr与prop的区别

问题描述

表单元素的checked、selected或disabled状态，用attr()方法，没法获得想要的布尔值(true/false)。

<!-- 下面是标准定义，也能够直接写checked/disabled/selected -->
<input type="checkbox" checked="checked" id="checkboxInput">
<input type="text" disabled="disabled" id="textInput">
<select>
    <option>001</option>
    <option selected="selected" id="second">002</option>
</select>
<script>
    $('#checkboxInput').attr('checked')//返回 checked
    $('#checkboxInput').prop('checked')//返回 true
    
    $('#textInput').attr('disabled')//返回 disabled
    $('#textInput').prop('disabled')//返回 true
    
    $('#second').attr('selected')//返回 selected
    $('#second').prop('selected')//返回 true
</script>
复制代码

问题缘由

1. 先说说attribute和property
   1. attribute是HTML元素(标签)的属性，是静态的(初始化)，不会响应用户操做如：文本框输值、点击单/复选框等
   2. property是HTML元素(标签)对应DOM对象的属性，响应用户操做。
2. 当浏览器解析html代码时，相应的DOM节点对象会被建立，节点对象上的大多数property与对应元素上的attribute有相同的名字或相近的名字，但并非一对一的关系。
3. 像checked、selected、disabled、multiple等attribute并非对应其节点对象的property。

解决方案

用做判断条件时：

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
复制代码

注： 像checked、selected、disabled、multiple都是值为Boolean的attribute,就是说只要attribute存在，不管什么值（没赋值、空字符串甚至设为"false"），其对应的property都是true。

参考连接