CODEWITHSUNDEEP
htmlcsscheckbox
Jacob
Jacob

Reputation: 4031

Disable checkbox click via CSS

Is it possible to disable checkbox clicks via CSS. But keeping the functionality of the checkbox intact So we can set its values dynamically using Javascript. I wasn't able to find a proper solution. 

pointer-events:none

did not work

Upvotes: 36

Views: 111207

Answers (9)

adriangc
adriangc

Reputation: 157

with JQuery:

$("input[type='checkbox']").attr("disabled","disabled")
<html>
  <head>
    disabling checkboxes
  </head>
  <body>
      <form>
        <input type="checkbox" checked="checked">
        <input type="checkbox">
        <input type="checkbox">
      </form>
  </body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

Rehmat
Rehmat

Reputation: 2299

I have covered 2 methods here: https://animatedcreativity.com/blog/2020/09/14/css-disable-checbox/

You can reduce the checkbox opacity to make it look disabled or use a pseudo-element for cover.

input[type="checkbox"]:nth-child(2) {
  opacity: 0.5;
  pointer-events: none;
}
input[type="checkbox"]:nth-child(3) {
  position: relative;
  pointer-events: none;
}
input[type="checkbox"]:nth-child(3):before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}
<input type="checkbox" checked="checked" />
<!-- using opacity -->
<input type="checkbox" checked="checked" />
<!-- using layer -->
<input type="checkbox" checked="checked" />

Upvotes: 3

CaptainGenesisX
CaptainGenesisX

Reputation: 405

You could do this via jQuery:

$('.element-view'.attr('disabled', true);

Upvotes: 0

Tyler
Tyler

Reputation: 133

This is possible by setting pointer-events: none on a parent element of the checkbox :)

Upvotes: 10

Green Wizard
Green Wizard

Reputation: 3667

just the html solution will be like this.

<input type="checkbox" disabled="disabled" id="checkBox"/>

if you wish to do this using javascript

document.getElementById("checkBox").disabled=true;

Upvotes: 33

johanthuresson
johanthuresson

Reputation: 580

You can put a transparent div on top of the checkbox to make it un-clickable by toggling a class on the parent object. Something like this...

.container{
  position:relative;
  display:block;

}
.cover{
  width:100%;
  height:100%;
  background:transparent;
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  display:none;

}

.container.disable-checkbox .cover{
  display:block;
}
<div class="container">
  <div class="cover"></div>
  <input type="checkbox"/> "clickable"

</div>
<div class="container disable-checkbox">
  <div class="cover"></div>
  <input type="checkbox"/> "un-clickable"
</div>

Upvotes: 16

Tetaxa
Tetaxa

Reputation: 4403

If pointer-events is not supported in your browser, then no, not with css only.

Upvotes: 8

Minister
Minister

Reputation: 1238

No, it doesn't seem possible.

You may need to HIDE IT. Use input type="hidden" to store information and process it using JS.

Upvotes: -1

Hans Westman
Hans Westman

Reputation: 869

You probably need some javascript for this. You could use this exemple if you're running jQuery:

$('input[type="checkbox"]').on('click', function(ev){
    ev.preventDefault();
})

Or a quick and dirty method, add an onClick attribute to the checkbox like this:

<input type="checkbox" onClick="return false;">

Upvotes: 9

Related Questions