迹忆客 专注技术分享

本文探讨了在 HTML 中启用和禁用复选框的方法。

HTML 中的复选框

复选框是一个交互式框，可以切换以表示肯定或否定。 它广泛用于表单和对话框。

当有一些选项时使用复选框，用户可以自由选择任意数量的选项，包括零。 这意味着选中一个不会自动取消选中其他选项。

当存在不互斥的选项时，主要使用复选框。 每个选项的侧面都会出现一个小框，可以切换。

默认情况下，该框为空。 空框表示否定，或者用户没有选择该选项。

单击时，框内会出现一个复选标记。 复选标记表示肯定。

再次单击时，复选标记消失。

您可以使用 <input> 标记在 HTML 中创建一个复选框，并将其类型属性设置为复选框。 您可以在 <input> 标签后写上项目名称。

例如，使用 ul 标签创建一个无序列表，并将样式设置为 list-style: none; 这样列表项就不会出现项目符号。 创建四个列表项并使用 <input type="checkbox"> 为每个列表项创建一个复选框。

代码示例：

<ul style="list-style: none;">
    <li><input type="checkbox">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox">Repeat</li>
</ul>

每个列表项都默认在其各自的复选框中具有切换功能。

使用 checked 属性在 HTML 中默认启用复选框

如果您需要一个复选框，其中某个选项在默认情况下始终处于选中状态，您可以为 <input> 标记实现一个属性。 要使用的属性是 checked 属性。

您只需要将属性的值设置为选中即可将其默认选中。

例如，对于 Drink 和 Repeat 选项，添加属性 checked 并将其值设置为“checked”。 这确保默认选中这两个值的复选框。

示例代码：

<ul style="list-style: none;">
    <li><input type="checkbox" checked="checked">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked="checked">Repeat</li>
</ul>

单击即可随时关闭选中的选项。

我们也可以单独使用 checked 来获得相同的输出。

示例代码：

<ul style="list-style: none;">
    <li><input type="checkbox" checked>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked>Repeat</li>
</ul>

在 HTML 中使用 disabled 属性默认禁用复选框

要在 HTML 中默认禁用复选框，您可以使用名为 disabled 的属性。 将 disabled 属性的值指定为 disabled 将阻止用户选中该复选框。

考虑以下示例。

示例代码：

<ul style="list-style: none;">
    <li><input type="checkbox" disabled="disabled">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled="disabled">Repeat</li>
</ul>

从输出中可以清楚地看出，四个选项中只有两个具有切换功能。 可以切换 Eat 和 Code 以显示刻度线，但 Drink 和 Repeat 不能。

默认情况下禁用选项 Drink 和 Repeat。 当我们点击 Drink and Repeat 选项旁边的复选框时，该复选框不会响应我们的点击。

这使得四个选项中只有两个可检查。

单独使用 disabled 可以获得同样的结果。

示例代码：

<ul style="list-style: none;">
    <li><input type="checkbox" disabled>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled>Repeat</li>
</ul>

因此，这些是在 HTML 中启用或禁用复选框的方法。