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”. You can create a form or question in HTML and give it some options using this checkbox.

Syntax:

<input type="checkbox">

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

Disable the checkbox in HTML

To disable the checkbox in HTML, you need to set the “disabled” attribute in your <input> tag.

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

See the above code in which the disabled attribute is used in the C++ option checkbox so it is disabled in the output. After disabling the checkbox, users cannot select or unselect 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 for 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.