I am trying to figure something out. I have several checkboxes which take the following form
<div class="checkbox">
<input name="someName1" class="checkbox styled" id="checkbox1" onclick="document.controller.setValue('/@someName1', this.checked ? '1' : '', 'someName1');" type="checkbox" value="" />
<label for="checkbox1"> SomeName 1 </label>
</div>
<div class="checkbox">
<input name="someName2" class="checkbox styled" id="checkbox2" onclick="document.controller.setValue('/@someName2', this.checked ? '1' : '', 'someName2');" type="checkbox" value="" />
<label for="checkbox2"> SomeName 2 </label>
</div>
The controller is needed to set the value in some system that I am using. Now the above seems to work, if I check both, they are both recorded in my system. If I check one and then uncheck it, it is not recorded.
The problem comes because I only want them to be able to select one option (I know radio buttons are for this, but I need to use checkboxes).
So I have the following
$('input.styled').on('change', function() {
$('input.styled').not(this).prop('checked', false);
});
And that makes sures that only one is selected. However, because of the onclick event, if I check a checkbox and the check a different checkbox (then the above code turns the initial one off), both checkboxes are being recorded as being checked in my system.
Therefore, I think I need to do something with my onclick event, to turn it off somehow if the checkbox is no longer checked.
I was thinking about doing something like the following
$('.checkbox').change(function() {
if($(this).is(":checked")) {
$value = $(this).attr("name");
document.controller.setValue('/@'+$value, this.checked ? '1' : '', 'checkbox');
}
});
So if the checkbox is checked, apply the setValue function to the checkbox who's name attribute has selected it. If it is unchecked, I need to somehow reverse this.
How would I go about doing something like that?
Thanks
Aucun commentaire:
Enregistrer un commentaire