TheWandererr TheWandererr - 2 months ago 13
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>
</form>


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
with:
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.

Answer

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

Comments