1

Besides the regular disabled property, is there any other way to "disable" a checkbox visually and functionally?

I'm just wondering if there's something like readonly for checkbox. I'm developing this module where a checkbox is disabled when either of the 2 unrelated conditions are met. I just want to keep it simple without writing some more codes and all.

Plan is, 1 condition triggers the disabled property and the other one triggers the "disabled2" property.

manu paul
  • 35
  • 1
  • 8
ACD
  • 1,431
  • 1
  • 8
  • 24

2 Answers2

3

The pointer-events property is used to control under what conditions particular graphic elements can become the target of pointer events.

Syntax: Formal Syntax: pointer-events: visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none | inherit

The values in the official syntax are applicable to SVG elements. Of these values, only these are applicable to HTML:

pointer-events: auto | none | inherit

Initial: auto Applies To: all elements Animatable: no

.Disable{pointer-events:none;opacity:0.7 }
.Disable+ span{opacity:0.6 }
<input type="checkbox" />
<span>checkbox1</span>
<br>
<input type="checkbox" class="Disable"/>
<span >checkbox2</span>
Farhad Bagherlo
  • 6,725
  • 3
  • 25
  • 47
2

You can add following CSS property to div containing checkbox

  pointer-events:none

Then it will be disabled.

Sandunka Mihiran
  • 556
  • 4
  • 19