Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Transform checkboxes (multiple selections) to radio buttons or checkbox with single selection?

Tags:

jquery

forms

I have the following list of checkboxes. The way the list is output it allows the user to select more than one value. However, I need the user to be only allowed to select one single value from the list of checkboxes below.

Is it possible to somehow achieve this with jQuery? It would also be okay to change the list to radio buttons, select list or anything else that might help.

Unfortunately I have no access to the generating function, so I cannot change the output.

Thanks in advance

<form class="ajax-form" id="user-register" method="post" accept-charset="UTF-8" action="(...)">

(...)

<div id="edit-notifications-custom-custom-berlin-wrapper" class="form-item form-option">
    <label for="edit-notifications-custom-custom-berlin" class="option"><input type="checkbox" class="form-checkbox" value="1" id="edit-notifications-custom-custom-berlin" name="notifications_custom[custom_berlin]"> Berlin</label>
</div>

<div id="edit-notifications-custom-custom-hamburg-wrapper" class="form-item form-option">
    <label for="edit-notifications-custom-custom-hamburg" class="option"><input type="checkbox" class="form-checkbox" value="1" id="edit-notifications-custom-custom-hamburg" name="notifications_custom[custom_hamburg]"> Hamburg</label>
</div>

<div id="edit-notifications-custom-custom-frankfurt-am-main-wrapper" class="form-item form-option">
    <label for="edit-notifications-custom-custom-frankfurt-am-main" class="option"><input type="checkbox" class="form-checkbox" value="1" id="edit-notifications-custom-custom-frankfurt-am-main" name="notifications_custom[custom_frankfurt-am-main]"> Frankfurt am Main</label>
</div>

<div id="edit-notifications-custom-custom-duesseldorf-wrapper" class="form-item form-option">
    <label for="edit-notifications-custom-custom-duesseldorf" class="option"><input type="checkbox" class="form-checkbox" value="1" id="edit-notifications-custom-custom-duesseldorf" name="notifications_custom[custom_duesseldorf]"> Düsseldorf</label>
</div>

<div id="edit-notifications-custom-custom-bielefeld-wrapper" class="form-item form-option">
    <label for="edit-notifications-custom-custom-bielefeld" class="option"><input type="checkbox" class="form-checkbox" value="1" id="edit-notifications-custom-custom-bielefeld" name="notifications_custom[custom_bielefeld]"> Bielefeld</label>
</div>

<div id="edit-notifications-custom-custom-muenchen-wrapper" class="form-item form-option">
    <label for="edit-notifications-custom-custom-muenchen" class="option"><input type="checkbox" class="form-checkbox" value="1" id="edit-notifications-custom-custom-muenchen" name="notifications_custom[custom_muenchen]"> München</label>
</div>

(...)

asdasd

like image 236
maze Avatar asked Oct 13 '22 21:10

maze


1 Answers

$('.form-checkbox').bind('click', function() {
    $('.form-checkbox').not(this).attr('checked', false);
});

EDITED to optimize performance.

like image 159
shoebox639 Avatar answered Nov 04 '22 19:11

shoebox639