Make a jquery mobile checkbox not clickable

Question

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.

I dont want to use the disabled option! Why? What you're trying to achieve is the exact purpose of that option. — Frédéric Hamidi
– Frédéric Hamidi, Commented Sep 27, 2016 at 14:34
I dont want to use it because it will be grayed out. Can i avoid that? — TheWandererr
– TheWandererr, Commented Sep 27, 2016 at 14:37
It's does not appear to be easy to do -- even preventing the default vclick behavior fails to work (probably because the original checkbox is not part of the final widget). ezanker's solution should work, though. — Frédéric Hamidi
– Frédéric Hamidi, Commented Sep 27, 2016 at 14:46

ezanker · Accepted Answer · 2016-09-27 14:42:41Z

2

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

answered Sep 27, 2016 at 14:42

ezanker

24.7k1 gold badge23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Make a jquery mobile checkbox not clickable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related