¿Transforma las casillas de verificación (múltiples selecciones) en botones de opción o casillas con una sola selección?

Tengo la siguiente lista de casillas de verificación. La forma en que se genera la lista permite al usuario seleccionar más de un valor. Sin embargo, necesito que el usuario solo pueda seleccionar un solo valor de la lista de casillas de verificación a continuación.¿Transforma las casillas de verificación (múltiples selecciones) en botones de opción o casillas con una sola selección?

¿Es posible de alguna manera lograr esto con jQuery? También estaría bien cambiar la lista a botones de opción, seleccionar lista o cualquier otra cosa que pueda ayudar.

Lamentablemente no tengo acceso a la función de generación, por lo que no puedo cambiar la salida.

Gracias de antemano

<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

Fuente

2010-11-02 maze

Si usted es capaz de, botones de radio son el camino a recorrer. No es necesario agregar un código complicado del lado del cliente para lograr algo que esté disponible de forma nativa en HTML. – dotariel

Estoy de acuerdo, pero como dije no puedo cambiar esto antes de que salga. – maze

-1

Prueba esto:

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

Fuente

2010-11-02 19:54:00 jellyfishtree

No se puede cambiar el tipo de entrada una vez que se agrega al DOM. – shoebox639

mierda ... es suficiente. – jellyfishtree

quizás usando .insertAfter para insertar una radio con los mismos detalles después de ella y luego eliminar el original – jellyfishtree

la mejor manera de hacer esto sería cambiar el tipo en el HTML original. Si no puede hacer esto, sin embargo, se puede hacer lo siguiente:

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

Fuente

2010-11-02 19:58:25 lonesomeday

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

Editado para optimizar el rendimiento.

Fuente

2010-11-02 19:59:27 shoebox639

Puede simplificar esto a '$ ('. Form-checkbox'). Not (this) .attr ('checked', false ')', lo que aumentaría significativamente el rendimiento. [attr() es mucho más lento que cada uno() en este caso] (http://jsperf.com/attr-vs-each), sin embargo. – lonesomeday

Gracias! Usar .each se ha vuelto casi mecánico para mí. heh. – shoebox639

¡Qué buena solución! Thx –

este código cambiar el código de proceso

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

Fuente

2010-11-08 12:44:44 rterrani

¿Transforma las casillas de verificación (múltiples selecciones) en botones de opción o casillas con una sola selección?

Respuesta

Cuestiones relacionadas