布尔属性

布尔属性是一种特殊属性，只存在"有"或"无"两种状态，无需属性值。

布尔属性特点

• 无需值：属性存在即为true
• 省略格式：直接写属性名即可
• 生效规则：有属性则生效，无属性则不生效

<!-- 标准写法：只写属性名 -->
<input disabled>
<input required>

<!-- 也可写属性名=属性名 -->
<input disabled="disabled">
<input required="required">

常用布尔属性

表单相关

示例代码

<!-- disabled 禁用 -->
<input type="text" disabled>
<button disabled>禁用按钮</button>

<!-- required 必填 -->
<input type="text" name="username" required>

<!-- readonly 只读 -->
<input type="text" value="不可编辑" readonly>

<!-- checked 选中 -->
<input type="checkbox" checked>
<input type="radio" name="gender" value="male" checked>

<!-- selected 下拉选中 -->
<select name="city">
    <option value="bj" selected>北京</option>
    <option value="sh">上海</option>
</select>

<!-- multiple 多选 -->
<select name="tags" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
</select>
<input type="file" multiple>

媒体布尔属性

video/audio属性

<video src="video.mp4" controls autoplay muted loop>
</video>

<audio src="music.mp3" controls autoplay loop>
</audio>

autoplay在大多数浏览器需要配合muted使用才能生效。

其他布尔属性

其他常用

<!-- hidden 隐藏元素 -->
<div hidden>隐藏的内容</div>

<!-- draggable 可拖拽 -->
<div draggable="true">可拖拽元素</div>

<!-- contenteditable 可编辑 -->
<div contenteditable="true">可编辑内容</div>

<!-- open 详情展开 -->
<details open>
    <summary>标题</summary>
    <p>展开的内容</p>
</details>

<!-- defer/async 脚本加载 -->
<script src="app.js" defer></script>
<script src="analytics.js" async></script>

布尔属性对比

JavaScript操作布尔属性

<input type="checkbox" id="check1">
<button onclick="toggle()">切换</button>

<script>
    const checkbox = document.getElementById('check1');

    // 设置布尔属性
    checkbox.checked = true;
    checkbox.disabled = true;

    // 移除布尔属性
    checkbox.disabled = false;

    // 使用setAttribute/removeAttribute
    checkbox.setAttribute('disabled', '');
    checkbox.removeAttribute('disabled');
</script>

要点总结

1. 无需值：布尔属性直接写属性名即可
2. 存在即生效：属性存在表示true
3. 禁用vs只读：disabled不提交值，readonly会提交
4. JS操作：直接设置true/false或使用removeAttribute