Преобразовать флажки (множественный выбор) в переключатели или флажок с одним выбором?

Question

У меня есть следующий список флажков.Способ вывода списка позволяет пользователю выбрать более одного значения.Однако мне нужно, чтобы пользователю было разрешено выбрать только одно значение из списка ниже.

Можно ли как-то добиться этого с помощью jQuery?Также можно изменить список на переключатели, выбрать список или что-нибудь еще, что может помочь.

К сожалению, у меня нет доступа к функции генерации, поэтому я не могу изменить вывод.* Заранее спасибо

<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

Answer 1

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

РЕДАКТИРОВАНИЕ для оптимизации производительности.

Answer 2

этот код меняет код процесса

$(document).ready(function(){
    $('input.form-checkbox').each(function(){
       var self=$(this);
       $(this).replaceWith(
           $('<input type="radio" />').
               attr("value",self.attr("name")).
               attr("name","notifications_custom").
               attr("id",self.attr("id")).
               addClass("form-radio")
       );
    });
});

Answer 3

Самый лучший способ сделать это - изменить тип исходного HTML. Однако, если вы не можете сделать это, вы можете сделать следующее:

$(document).ready(function(){
    $('input.form-checkbox').change(function(){
        $('input.form-checkbox').not(this).each(function(idx, el){
            el.checked = false;
        });
    });
});

Answer 4

Попробуйте это:

$('[type=checkbox]').attr('type','radio');