Read-only checkbox in HTML
This article is a quick hack on how to make an HTML Checkbox control read-only. But first, let's take a quick look at the Checkbox control.
HTML Checkbox Overview
The default rendering of an element of type checkbox <input>is a box that is selected (ticked) when activated, similar to what you would see on a legal government paper form.
The exact appearance is determined by the operating system settings used by the browser. For example, it is usually square, but can also have rounded corners. Also, unlike radio buttons, you can select multiple options in a checkbox.
grammar:
<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>
请注意, the checkbox name is not its display name. The display name<label>is specified with the tag. This name is used on the server side when submitting the form.
When the form is submitted, we get the value of only the checked checkboxes. This is because the value of disabled or unchecked boxes is not received on the server side.
Read-only checkbox in HTML
Suppose you have a situation where you need to force a checkbox to be checked and not allow the user to uncheck it or make it a read-only field; we can do this through a JavaScript function.
<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>
In this HTML code, we have made two checkboxes; one set to read-only and the other set to disabled. To make the checkbox read-only, we return false when the user clicks it.
It will leave the state of the checkbox unchanged since it is already checked so it will remain checked regardless of whether the user clicks it or not.
When the form is submitted, the value of this checked checkbox will be sent along with the form data, whereas it will not send the data for the disabled checkbox. Let's see the output:
请注意, a disabled checkbox is grey and users will not be able to check or uncheck it.
For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.
Related Articles
Creating a currency input in HTML
Publish Date：2025/04/19 Views：119 Category：HTML
-
In this article, users will learn to input convert a normal HTML field into a currency input field. We will use HTML and jQuery to achieve our goal. input Convert plain to currency input in HTML using JavaScript toFixed() method In HTML, th
HTML Hide Buttons and Show Them Using Onclick
Publish Date：2025/04/19 Views：178 Category：HTML
-
This article will show you several ways to hide HTML buttons and make them visible using the onclick event. Using the CSS display property to show hidden buttons in HTML We can first hide the HTML button by setting its display property to n
Right align button in HTML
Publish Date：2025/04/19 Views：136 Category：HTML
-
Alignment is the positioning of text or buttons in different places like right, left or center on an HTML web page. We can easily use the alignment properties to place our text, images or other elements anywhere on the web page. There may b
Readonly in HTML Select Tag
Publish Date：2025/04/19 Views：176 Category：HTML
-
TML, Hypertext Markup Language, is widely used to format websites. Also, CSS (Cascading Style Sheets) can be used to style websites. Below are some of the attributes used in HTML and CSS to control user and cursor behavior. select readonly
The role attribute in HTML
Publish Date：2025/04/19 Views：142 Category：HTML
-
In this article, we will introduce the HTML role attribute and its uses. Introduction to the role attribute in HTML The role attribute in HTML belongs to the WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) sp
Pagination when printing in HTML
Publish Date：2025/04/19 Views：147 Category：HTML
-
This article will introduce several ways to force page breaks when printing HTML content. Set the page-break-after property to always Inside @media print to Page Break in HTML The @media print rule of CSS lets us apply rules when printing H
Displaying Cookie-Based Images in HTML
Publish Date：2025/04/19 Views：95 Category：HTML
-
This article will introduce a method to display images in HTML format based on cookies set in PHP. Display images based on cookies set in HTML The problem statement is that we need to display a specific image based on a cookie passed by the
Creating a download link in HTML
Publish Date：2025/04/19 Views：158 Category：HTML
-
This article will introduce a method to create a download link in HTML. Use the download attribute to create download links in HTML We can create a download link using the download attribute inside the HTML anchor element. In the anchor tag
::before Selector in HTML
Publish Date：2025/04/19 Views：124 Category：HTML
-
This article will introduce CSS ::before pseudo-elements and explore their application in HTML. CSS ::before pseudo-element ::before The selector is a CSS pseudo-element that we can use to insert content before one or more selected elements
