Menu
Do you know how I could style a checkbox when it is disabled?
E.g.:
<input type="checkbox" value="All Terrain Vehicle" name="exfilter_All Terrain Vehicle" id="exfilter_All_Terrain_Vehicle" class="exfilter" disabled=""> 
228
You can't style a disabled checkbox directly because it's controlled by the browser / OS. However you can be clever and replace the checkbox with a label that simulates a checkbox using pure CSS. You need to have an adjacent label that you can use to style a new "pseudo checkbox".
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... Show activity on this post. This still sets the css styles for the checkboxes so it looks like it was clicked.
Use the attribute selector in the css
input[disabled]{ outline:1px solid red; // or whatever } for checkbox exclusively use
input[type=checkbox][disabled]{ outline:1px solid red; // or whatever } $('button').click(function() { const i = $('input'); if (i.is('[disabled]')) i.attr('disabled', false) else i.attr('disabled', true); })input[type=checkbox][disabled] { outline: 2px solid red; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" value="tasd" disabled /> <input type="text" value="text" disabled /> <button>disable/enable</button>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
