Trasforma le caselle di controllo (selezioni multiple) nei pulsanti di opzione o nella casella di spunta con selezione singola?

Question

Ho il seguente elenco di checkbox. Il modo in cui la lista viene emessa consente all'utente di selezionare più di un valore. Tuttavia, ho bisogno che l'utente possa solo selezionare un singolo valore dall'elenco di caselle di controllo qui sotto.

È possibile ottenere in qualche modo questo con jQuery? Sarebbe anche ok per cambiare la lista dei pulsanti di scelta, selezionare l'elenco o qualsiasi altra cosa che potrebbe essere d'aiuto.

Purtroppo non ho accesso alla funzione di generazione, quindi non posso modificare l'uscita.

Grazie in anticipo

<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

Prova questo:

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

Answer 2

Il miglior modo per farlo sarebbe quello di cambiare il tipo nel codice HTML originale. Se non è possibile fare questo, però, si potrebbe fare la seguente:

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

modificato per ottimizzare le prestazioni.

Answer 4

questo codice modificare il codice di processo

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