如何使按鈕組具有與一組單選按鈕相同的行爲

Question

我想使我的button元素像單選按鈕一樣工作。我的意思是，如果我選擇一個具有相同名稱或ID的人，那麼其他人將被取消選擇。

<button name="options" id="options>Button 1</button> 
<button name="options" id="options>Button 2</button> 
<button name="options" id="options>Button 3</button> 

我該怎麼做？

Answer 1

我會將id更改爲class，然後對於想要作爲組使用的每組按鈕都有唯一的類名稱。這裏是二按鈕組的示例，我通過點擊唯一一個加入重新啓用按鈕的功能左

$('button').on('click', function() { 
 
    var name = $(this).attr('name'); 
 
    var cl = $(this).attr('class'); 
 
    var reenable = false; 
 
    $('.' + cl).each(function() { 
 
    if ($(this).attr('name') != name) { 
 
     if ($(this).attr('disabled') == 'disabled') 
 
     reenable = true; 
 
     else 
 
     $(this).attr('disabled', true); 
 
    } 
 
    }); 
 
    if (reenable) 
 
    $('.' + cl).attr('disabled', false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button name="options1" class="options">Button 1</button> 
 
<button name="options2" class="options">Button 2</button> 
 
<button name="options3" class="options">Button 3</button> 
 
<br /> 
 
<button name="options1" class="options2">Button 1</button> 
 
<button name="options2" class="options2">Button 2</button> 
 
<button name="options3" class="options2">Button 3</button>