2012-01-27 231 views
2

我有一個查詢返回可用服務的表列表,並且每個返回服務的錶行有3個複選框 - Book,Send Info,No Thanks。JQuery - 每行啓用/禁用複選框

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

} 
+0

注:輸入標籤自動關閉標籤,你應該寫出來''而不是'' – 2012-01-27 06:22:16

回答

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')); 
}); 
+0

感謝您的試用!然而,它會產生與以前相同的效果 - 選中任何Book複選框(發送信息或不感謝),然後僅禁用發送信息和不感謝的第一行。我實際上需要這是排除每個返回的行。 – user1172854 2012-01-27 06:04:44

+0

更新了答案..現在試試 – 2012-01-27 07:23:37

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

延伸閱讀:

+0

謝謝!這工作很棒! – user1172854 2012-01-27 06:08:07

+0

+1如果我正確地閱讀問題,我會做的。 (我刪除了我的答案。) – nnnnnn 2012-01-27 06:17:01

+0

我添加了一些註釋和上下文,以將點擊事件綁定到ID爲「#tableID」(使用您的表ID更改)的表格中的複選框。 – 2012-01-27 06:17:56