CSS disable checkbox

In this article, we will see how to disable the checkbox in CSS.

What is checkbox

The checkbox is a small box for users’ selection. The users can also select a group of checkboxes. The user clicks the checkbox, and The default checkbox is unticked. Once users click the checkbox the box will be ticked and if they click again it will be unticked. If the checkbox is ticked it means “YES” and if it is unticked it means “NO”. We can create this checkbox by creating a form or question in HTML and giving it some options.

Syntax:

<input type="checkbox"></body>

If you don’t know how to create a checkbox then click on this link to learn in detail

Disable checkbox in HTML

<p>Select the languages you know: </p>  
C++<input type="checkbox" disabled>
C<input type="checkbox" >
Python<input type="checkbox" >
Java<input type="checkbox" >

If you want to disable the checkbox you need to use the “disabled” attribute. See at the above code in which the disabled attribute is used in the c++ option checkbox so it is disabled in the output. If you use the disabled attribute then users cannot tick or untick the checkbox. So you should use the disabled attribute only when you don’t need the option.

Disable the checkbox in CSS

Clickable<input type="checkbox">
Unclickable<input style="pointer-events:none "type="checkbox">

In the above code, we have two input tags for creating checkboxes. The first input tag doesn’t have any style but the second input tag, we use the CSS “pointer-events” property and give the value as none. This means the user cannot select or perform the unclickable checkbox. See the above output, the checkbox is displayed but we cannot be ticked or unticked the checkbox.   We can also disable the checkbox using Javascript.