I am creating an HTML5 application using Bootstrap. I have implemented some custom markup to style radio buttons, as well as included JQuery for functionality:
<div role="group" class="btn-group btn-group-justified">
<label for="radioOption1" class="btn btn-primary">
<input type="radio" id="radioOption1" name="Options" />
<span>ABC</span>
</label>
<label for="radioOption2" class="btn btn-default">
<input type="radio" id="radioOption2" name="Options" />
<span>XYZ</span>
</label>
</div>
<script type="text/javascript">
$(document).ready(function () {
var radios = $("input[name=\"Options\"");
radios.click(function () {
radios.each(function () {
$("label[for=\"" + $(this).attr("id") + "\"]").toggleClass("btn-primary", $(this).is(":checked"));
$("label[for=\"" + $(this).attr("id") + "\"]").toggleClass("btn-default", !$(this).is(":checked"));
});
});
});
</script>
Although the script works on desktop, I have encountered an issue on my iPhone. When I tap one of the labels, it displays hover styles instead of click styles.
It seems that "touch" is being interpreted as "hover" in this specific scenario.
Has anyone faced a similar problem or knows how to resolve it?