I use a set of jquery ui buttons for some radio buttons. As far as I understand, jquery ui makes the shortcut look like a button, while the actual radio itself is underneath it, hidden. And when the user clicks on the label, the click spreads to the input below it.
I am trying to trigger an event on a switch set to "change". In most cases, this works correctly. The label is pressed and the radio will change from below and a fire will occur. However, there are several cases when a tag is clicked (which makes the button look like it is currently selected), but a click / change does not apply to the radio input under it. This makes it look like a specific option / radio is selected when it really is not.
Two of these scenarios:
- In chrome, when you “select” the label text on a button. The button looks selected, but under the radio has not been pressed / changed.
- In IE, when a user right-clicks to open a custom Menu context, then leaves the menu without selecting anything from the menu, and then double-clicks the button. Again, the button looks selected, but under the radio has not been pressed / changed.
My solution is to follow the click event on the shortcut, and when that happens, check if the radio under it is checked, and if not, check it and trigger the event that I wanted to trigger when I changed. Basically, to always force a click on the shortcut to the input. This works in both of the scenarios that I mentioned above.
However, I am wondering if there is a better / cleaner way to solve this problem.
Source:
<div class="view-original-data nav-2nd-line">
<input type="radio" id="view_current" name="view_original_data_options" value="current" checked="checked">
<label for="view_current">Current Data</label>
<input type="radio" id="view_original" name="view_original_data_options" value="original">
<label for="view_original">Original Data</label>
</div>
Script:
$viewOriginalDataButtons = $(".view-original-data")
.buttonset()
.on("change", my.handleOriginalDataOptionsClick);
, :
$viewOriginalDataButtons = $(".view-original-data")
.buttonset();
$(".view-original-data label")
.on("click", function () {
var labelId = $(this).attr('for'),
$buttonClicked = $('#' + labelId);
if (!$buttonClicked.prop('checked')) {
$buttonClicked.prop('checked', true);
my.handleOriginalDataOptionsClick($buttonClicked);
}
});