將單選框中的複選框（多選）轉換爲單選按鈕或複選框？

我有以下的複選框列表。列表輸出的方式允許用戶選擇多個值。但是，我需要用戶只能從下面的複選框列表中選擇一個值。將單選框中的複選框（多選）轉換爲單選按鈕或複選框？

有沒有可能以某種方式實現這與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

來源

2010-11-02 maze

如果你能，單選按鈕的路要走。無需添加複雜的客戶端代碼即可實現HTML中本地可用的功能。 – dotariel 2010-11-02 19:55:28

我同意，但正如我所說，在輸出前我無法改變它。 – maze 2010-11-02 20:13:59

-1

試試這個：

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

來源

2010-11-02 19:54:00 jellyfishtree

添加到DOM後，您無法更改輸入的類型。 – shoebox639 2010-11-02 19:55:40

廢話...夠公平的。 – jellyfishtree 2010-11-02 19:57:20

也許使用.insertAfter在它之後插入一個具有相同細節的收音機，然後刪除原始的 – jellyfishtree 2010-11-02 20:05:23

這樣做會改變原來的HTML類型的最好方式。如果你不能做到這一點，但是，你可以做到以下幾點：

來源

2010-11-02 19:58:25 lonesomeday

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

編輯以優化性能。

來源

2010-11-02 19:59:27 shoebox639

您可以簡化爲$（'。form-checkbox'）。not（this）.attr（'checked'，false'）'，這將顯着提高性能。然而，[attr（）比這個例子中的each（）慢很多]（http://jsperf.com/attr-vs-each）。 – lonesomeday 2010-11-02 20:06:00

謝謝！使用.each對我來說幾乎是機械的。嘿嘿。 – shoebox639 2010-11-02 20:08:29

多麼好的解決方案！ Thx – 2016-05-06 18:54:26

此代碼更改的過程代碼

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

來源

2010-11-08 12:44:44 rterrani

將單選框中的複選框（多選）轉換爲單選按鈕或複選框？

回答

相關問題