TheWandererr TheWandererr - 1 month ago 4
jQuery Question

Make a jquery mobile checkbox not clickable

So i am using jquery mobile and i have a checkbox and label in a form like so :

<form class="myForm">
<label><input checked name="myCheckBox" id="myCheckBox" onclick="return false;" onkeydown="return false;" type="checkbox">Checking</label>

Now comes my question: How can i make the checkbox readonly ? So the user can click on it but it wont change its state? I dont want to use the disabled option!

NOTE: Before you mark it as a duplicate ive searched for answers and could
only find solutions using none jquerymobile checkboxes. They solved it
onclick="return false"
which is not working... in jquerymobile you can test it
with this fiddle. If you remove the external resources
onclick="return false"
is working.


You can use disabled and then override the CSS that grays the checkbox:

.myForm .ui-checkbox.ui-state-disabled {
  opacity: 1;

jQM applies opacity to the DIV that surrounds the enhanced checkbox. This CSS resets the opacity to 1.

Updated FIDDLE