Chee Seng Teo Chee Seng Teo - 4 months ago 14
CSS Question

How to disable ckeckbox without input type?

I disable input type checkbox by adding a disabled.

<input type="checkbox" id="1_2" value="45" aria-checked="false" focusable="true" tabindex="-1" class=" seatNumber " name="code[]" placeholder="2" disabled >


How to disable a checkbox without input type?

<div id="1_2" role="checkbox" value="45" aria-checked="false" focusable="true" tabindex="-1" class=" seatNumber " name="code[]" disable>2</div>

Answer

The disabled property won't work on div

First Solution

You have to do it through css Pointer-events and make it selection to none.

Check the below snippet

.disabled{
 pointer-events: none;
 opacity: 0.4;
   -webkit-touch-callout: none; 
  -webkit-user-select: none;   
  -khtml-user-select: none;    
  -moz-user-select: none;      
  -ms-user-select: none;     
  user-select: none; 
}
<div id="1_2" role="checkbox" value="45" aria-checked="false" focusable="true" tabindex="-1" class="seatNumber disabled" name="code[]" readonly="true">Disabled div</div>

Second Solution

You can also achieve this by using pseudo elements to make it look like disabled. Using the below css.

CSS

.disabled{
   position:relative;
   display:inline-block;
}
.disabled:before{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: #ccc;
   content: '';
   opacity: 0.5;
}
Comments