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。

参考链接