Hộp kiểm chuyển đổi (nhiều lựa chọn) thành nút radio hoặc hộp kiểm có lựa chọn duy nhất?

Question

Tôi có danh sách các hộp kiểm sau đây. Cách danh sách là đầu ra nó cho phép người dùng chọn nhiều hơn một giá trị. Tuy nhiên, tôi cần người dùng chỉ được phép chọn một giá trị duy nhất từ ​​danh sách hộp kiểm bên dưới.

Có thể bằng cách nào đó đạt được điều này với jQuery không? Cũng có thể thay đổi danh sách thành các nút radio, chọn danh sách hoặc bất kỳ thứ gì khác có thể hữu ích.

Rất tiếc, tôi không có quyền truy cập vào chức năng tạo, vì vậy tôi không thể thay đổi đầu ra.

Cảm ơn trước

<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

Hãy thử điều này:

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

Answer 2

Cách đẹp nhất để làm điều này sẽ được thay đổi kiểu trong HTML gốc. Nếu bạn không thể làm được điều này, tuy nhiên, bạn có thể làm như sau:

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

Answer 3

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

chỉnh sửa để tối ưu hóa hiệu suất.

Answer 4

mã này thay đổi mã quá trình

$(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") 
     ); 
    }); 
});