迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > HTML >

HTML 中的只读复选框

作者:迹忆客 最近更新:2023/05/05 浏览次数:

本文是关于如何使 HTML 复选框控件成为只读组件的快速破解。 但是,首先,让我们简要介绍一下复选框控件。


HTML 复选框概述

checkbox 类型的 <input> 元素的默认呈现是一个在激活时被选中(打勾)的框,类似于您在合法的政府纸质表格上看到的内容。

浏览器使用的操作系统设置决定了确切的外观。 例如,它通常是方形的,但也可以有圆角。 此外,与单选按钮不同,您可以在复选框中选择多个选项。

语法:

<input type="checkbox" id="physics" name="physics" checked>
      <label for="physics">Physics</label>
<input type="checkbox" id="maths" name="maths">
      <label for="maths">Mathematics</label>
<input type="checkbox" id="cs" name="cs">
      <label for="cs">Computer Science</label>

请注意 ,复选框名称不是其显示名称。 显示名称通过 <label> 标记指定。 提交表单时在服务器端使用此名称。

提交表单时,我们只获得选中复选框的值。 这是因为服务器端未收到禁用或未选中框的值。


HTML 中的只读复选框

假设你有这样一种情况,你需要强制选中复选框并且不允许用户取消选中它或将其设置为只读字段; 我们可以通过 JavaScript 函数来实现。

<HTML>
    <head>
    <script>
        function makeReadOnly() {
            return false;
        }
    </script>
    <body>
       <input type="checkbox" id="physics" name="physics" onClick="return makeReadOnly()" checked>
       <label for="physics">Physics</label> <br/>
       <input type="checkbox" id="maths" name="maths" disabled>
       <label for="maths">Mathematics</label><br/>
    </body>
</html>

在这段 HTML 代码中,我们制作了两个复选框; 一个设为只读,另一个设为禁用。 为了使复选框只读,我们在用户单击它时返回 false。

它将使复选框的状态不变,因为它已经被选中,因此无论用户是否单击,它都会保持选中状态。

当提交表单时,这个选中的复选框的值将与表单数据一起发送,而它不会发送禁用的复选框的数据。 让我们看看输出:

html中的只读复选框

请注意 ,禁用的复选框是灰色的,用户将无法选中或取消选中它。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

HTML 中的 role 属性

发布时间:2023/05/06 浏览次数:124 分类:HTML

本篇文章介绍 HTML role属性。HTML中 role 属性介绍,role 属性定义描述语义的 HTML 元素的角色。

在 HTML 中打印时分页

发布时间:2023/05/06 浏览次数:188 分类:HTML

本篇文章介绍如何在打印 HTML 页面或内容时强制分页。将 page-break-after 属性设置为 always Inside @media print to Page Break in HTML

在 HTML 中显示基于 Cookie 的图像

发布时间:2023/05/06 浏览次数:154 分类:HTML

本文介绍如何根据 HTML 中的 cookies 显示图像。根据 HTML 中设置的 Cookies 显示图像。问题陈述是我们需要根据网页传递的cookie来显示特定的图像。

在 HTML 中创建下载链接

发布时间:2023/05/06 浏览次数:140 分类:HTML

本文介绍如何在 HTML 中创建下载链接。使用 download 属性在 HTML 中创建下载链接.。我们可以使用 HTML 锚元素内的下载属性来创建下载链接。

HTML 中的 ::before 选择器

发布时间:2023/05/06 浏览次数:70 分类:HTML

本教程介绍 CSS ::before 伪元素。CSS ::before 伪元素。 ::before 选择器是一个 CSS 伪元素,我们可以使用它在一个或多个选定元素之前插入内容。 它默认是内联的。

在 HTML 中创建一个可滚动的 Div

发布时间:2023/05/06 浏览次数:54 分类:HTML

本篇文章介绍如何使 HTML div 可滚动。本文将介绍在 HTML 中使 div 可滚动的方法。 我们将探索垂直和水平滚动,并通过示例查看它们的实现。

HTML 显示箭头的代码

发布时间:2023/05/06 浏览次数:153 分类:HTML

一篇关于用于显示箭头的 Unicode 字符实体的紧凑文章。本文讨论使用 Unicode 字符实体在我们的 HTML 页面上显示不同的字符。 HTML 中使用了许多实体,但我们将重点学习表示上、下、左、右的三角

在 HTML 中启用和禁用复选框

发布时间:2023/05/06 浏览次数:149 分类:HTML

本篇文章介绍如何启用和禁用 HTML 中的复选框。HTML 中的复选框 复选框是一个交互式框,可以切换以表示肯定或否定。 它广泛用于表单和对话框。

在 HTML 中显示 XML

发布时间:2023/05/06 浏览次数:161 分类:HTML

本篇文章介绍了如何在 HTML 页面上显示 XML 代码。可扩展标记语言 (XML) 简介 它是一种类似于 HTML 的标记语言,但没有内置标签。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便