JQuery - 每行启用/禁用复选框

Question

我有一个查询返回可用服务的表列表，并且每个返回服务的表行有3个复选框 - Book，Send Info，No Thanks。

echo '<td align="center">'.'<input type="checkbox" id="ckBook_'.$i.'" name="ckBook['.$i.']"></input>'.'</td>'; 
echo '<td align="center">'.'<input type="checkbox" id="ckSendInfo_'.$i.'" name="ckSendInfo['.$i.']" class="group1_'.$i.'"></input>'.'</td>'; 
echo '<td align="center">'.'<input type="checkbox" id="ckNoThanks_" name="ckNoThanks['.$i.']" class="group1_'.$i.'"></input>'.'</td>'; 

如果在一行的复选框中的一个用户点击，然后在同一行的其他复选框应该被禁用，否则它们应该被启用。我尝试过使用单选按钮，但是Book复选框也会在底部返回一个运行总数，当我使用单选按钮时，它会扰乱总计功能。

我研究过并认为我非常接近解决方案。我修改了我在这个网站上找到的一些代码，但是当第一列复选框（任意一行）被选中时，它目前仅影响第二和第三列。

$(function() { 
enable_cb(); 
$('input[id^=ckBook_]').click(enable_cb); 
$('input[id^=ckSendInfo_]').click(enable_cb); 
$('input[id^=ckNoThanks_]').click(enable_cb); 
}); 

function enable_cb() { 
if (this.checked) 
    { 
    $("input.group1_0").attr("disabled", true); 
    } 

else 
    { 
    $("input.group1_0").removeAttr("disabled"); 
    $("input.group1_1").removeAttr("disabled"); 
    } 

} 

Answer 1

试试这个

function enable_cb() { 
    if ($(this).is(':checked')){ 
     $("input.group1_0").attr("disabled", true); 
     }else{ 
     $("input.group1_0").attr("disabled", false); 
     $("input.group1_1").attr("disabled", false); 
     } 
    } 

UPDATE：

$(':checkbox').click(function(){ 
    var elems = $(this).parents('tr').find(':checkbox'); 
    elems.not($(this)).attr('disabled',$(this).is(':checked')); 
}); 

Answer 2

这个简单的代码将做到这一点：

// bind a click handler on any of those checkboxes 
// withint the table #tableID 
$('input[type=checkbox]', '#tableID').click(function(e) { 

    // 'this' is the clicked checkbox 
    $(this).closest('tr') 
     // go to the TR parent and find all checkboxes, 
     // but exclude myself with .not() 
     .find('input[type=checkbox]').not(this) 
     // use .prop() to set special attributes like disabled 
     .prop('disabled', this.checked); 

}); 

DEMO

延伸阅读：

• .closest()
• .not()
• .prop()