如何根據選擇哪個單選按鈕來禁用按鈕？

Question

我有3個div組，每個組包含一個單選按鈕，一個標籤和一個按鈕。 我希望能夠啓用與所選單選按鈕相同的組中的按鈕，並禁用其他組的按鈕。

<div class="row"> 
    <div class="col-md-6"> 
    <!-- when this radio button is checked... --> 
    <input id="input-1" type="radio" name="disable-button" checked="checked"> 
    <label for="input-1">Input 1</label> 
    <!-- this button is enabled --> 
    <button type="button">ADD</button> 
    <!-- ...and vice versa --> 
    </div> 
    <div class="col-md-6"> 
    <!-- when this radio button is not checked... --> 
    <input id="input-2" type="radio" name="disable-button">   
    <label for="input-2">Input 1</label> 
    <!-- ...this button should be disabled --> 
    <button type="button" disabled>ADD</button> 
    <!-- ...and vice versa --> 
    </div> 
    <div class="col-md-6"> 
    <!-- when this radio button is not checked... --> 
    <input id="input-3" type="radio" name="disable-button"> 
    <!-- ...this button should be disabled --> 
    <label for="input-3">Input 1</label> 
    <button type="button" disabled>ADD</button> 
    <!-- ...and vice versa --> 
    </div> 
</div> 

有沒有辦法通過jQuery來做到這一點？

編輯：我希望解決方案是動態的，如果可能的話，我不得不添加更多的組。

Answer 1

我會用下面的jQuery代碼：

$('input[type=radio]').change(function(){ 
    $('button').prop('disabled', true); 
    $(this).parent().find('button').prop('disabled', false); 
}); 

https://jsfiddle.net/dotspencer/6reL64ss/

Answer 2

之後添加以下代碼的父div塊。

$(input[type=radio]).change(function(){ 
    $(this).is(':checked') && $(this).parent().find('button').prop('disabled', false) || $(this).parent().find('button').prop('disabled', true); 
    });