Menu
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
891
You can put a transparent div on top of the checkbox to make it un-clickable by toggling a class on the parent object.
$(':checkbox[readonly]'). click(function(){ return false; });
The disabled property sets or returns whether a checkbox should be disabled, or not. A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers. This property reflects the HTML disabled attribute.
You can style checkbox label and readonly inputs with CSS, e.g.: input [readonly="readonly"] {} but the browser should make the checkbox should appear greyed out when set to readonly. "checkbox itself should appear greyed out just by setting the readonly attribute" - Tried in IE8, FF12. 0, Chrome.
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; 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
