javascript核心技术（二十八）jq的标签节点操作(四) 添加属性 prop方法

人亦已歌 · 发表于 2023-1-26 13:18:33

前面我们讲了attr方式添加属性的操作方法，下面再来看prop方法，该方法是用来操作哪些属性值为布尔类型的属性。
一、添加单个属性

$('#male').prop('checked','true');

复制代码

二、添加多个属性

$('#read').prop({'checked':'true','disabled':'false'});

复制代码

三、链式操作

$('#painting').prop({'checked':'true','disabled':'false'}).removeAttr('disabled');

复制代码

请看以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加属性 prop方法</title>
    <script src="./jquery.js"></script>
</head>
<body>
    <form action="https://www.teamczyx.com">
        <input type="radio" id="male">男
        <input type="radio" id="female">女
        <br>
        <input type="checkbox" id="read">读书
        <input type="checkbox" id="write">写字
        <input type="checkbox" id="painting">画画
    </form>
</body>
<script>
    $('#male').prop('checked','true');
    $('#read').attr({'checked':'true','disabled':'false'});
    $('#painting').attr({'checked':'true','disabled':'false'}).removeAttr('disabled');
</script>
</html>

以上我们创建了一个简单的表单，其中包括两个单选框，三个多选框。
先用prop方法给第一个单选框添加了checked属性，即做了选中操作，然后又给第一个多选框同时添加了checked和disable属性，即选中并禁用。
最后我们使用链式操作的方式，先给第三个多选框添加了checked和disable属性，接着又删除了disable属性，最终表现为仅有选中状态。
执行结果如下：
javascript核心技术（二十八）jq的标签节点操作(四) 添加属性 prop方法