允許僅一次選擇複選框基或無

我有以下複選框：允許僅一次選擇複選框基或無

<input type='checkbox' value='1' class='unique group1'> 
<input type='checkbox' value='2' class='unique group1'> 

<input type='checkbox' value='1' class='unique group2'> 
<input type='checkbox' value='2' class='unique group2'>

我需要允許選擇僅一個複選框（如單選按鈕），或還沒有複選框被選中。

我嘗試下面的jQuery代碼：

$('input.unique').click(function() { 
    $unique.removeAttr('checked'); 
    $(this).prop('checked', true); 
});

但這將所有的複選框爲同一組，但我有兩個組。

我該如何解決這個問題？

UPDATE

如果它很容易，我可以只使用一個類和數據組：

<input type='checkbox' value='1' class='unique' data-group='group1'> 
<input type='checkbox' value='2' class='unique' data-group='group1'> 

<input type='checkbox' value='1' class='unique' data-group='group2'> 
<input type='checkbox' value='2' class='unique' data-group='group2'>

我不使用名稱來選擇組的原因是因爲這是爲由服務器端代碼和所有名稱呈現不同...

所以基本上我需要找到所有類=「唯一」的複選框，然後只允許在每個組中選擇沒有或一個複選框，組。

來源

2014-09-02 Miguel Moura

複選框應該有一個名稱屬性。另外，如果您希望它們像單選按鈕那樣工作，則使用單選按鈕。用戶在使用接口時需要一定的連續性。 – j08691 2014-09-02 20:29:40

對於'checked'，你應該使用'.prop（）'而不是'.attr（）' – DarkAjax 2014-09-02 20:31:25

我不能使用收音機，因爲我需要允許用戶不選擇任何複選框... – 2014-09-02 20:32:34

我認爲你正在尋找：

$('input.unique').click(function() { 
    if (!$(this).prop('checked')) 
    { 
    return; 
    } 
    var group = $(this).data('group'); 
    if (group) 
    { 
    $('input[data-group="' + group + '"]:checked').prop('checked', false); 
    $(this).prop('checked', true); 
    } 
});

Working JsFiddle Example。

來源

2014-09-02 21:10:50

我試過你的代碼，但選擇複選框後，我不能取消選擇它，除非我點擊另一個...我需要能夠取消選中一個複選框。 – 2014-09-02 21:44:31

已更新代碼以允許取消選中複選框。 – 2014-09-02 21:48:44

對不起，但這是行不通的......現在我可以在同一組中選擇許多複選框。我用你的代碼創建了一個小提琴：http://jsfiddle.net/dekfq7zq/ – 2014-09-03 09:38:22

你幾乎擁有它。所有你需要的是選擇正確的輸入：

groupName = $(this).data('group'); 
$('input[data-group="' + groupName + '"]').removeAttr('checked');

而且這裏有一個小提琴：http://jsfiddle.net/qor1r0a4/

這結束了多一點比我預想的複雜。事實證明，如果您通過編程檢查複選框，jQuery無法檢測到它。您可以使用類，雖然解決了這個問題，但它不是優雅：

$(function() { 
    $('input.unique').click(function(e) { 

     needsCheck = !$(this).hasClass('checked'); 

     $('input[data-group="' + $(this).data('group') + '"]') 
      .removeAttr('checked') 
      .removeClass('checked'); 

     if (needsCheck) { 
      $(this).addClass('checked').prop('checked', true); 
     } 
    }); 
});

來源

2014-09-02 21:09:44

以您的示例，我無法取消選擇複選框，我需要做到這一點... – 2014-09-02 21:42:31

哎呀！是的，那只是廣播功能。事實證明，這並不像我想的那樣簡單。給我幾分鐘，我想我可以修復它。 – 2014-09-02 22:14:30

我更新了小提琴。我不得不使用類來讓它工作，所以它不是100％完美的imo。 – 2014-09-02 22:17:11

允許僅一次選擇複選框基或無

回答

相關問題