使用javascript禁用多個複選框

Question

我的JS函數有問題。我會用我的代碼和Prt Sc向你解釋。

代碼= http://jsfiddle.net/dKeRf/

這是一個PHP函數和JS功能。

屏幕= http://img824.imageshack.us/i/antoe.png/

如果2複選框過表中的一個被選中時，在這兩個表中的所有的複選框必須被禁止。目前它適用於第一個複選框，但不適用於第二個複選框，我問你爲什麼？ :)

我在我的'For'突出部分中使用'10'進行測試，我將根據表格的行數改變後者。

感謝您的幫助，祝您有美好的一天！

Answer 1

添加一個類的所有複選框：

<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'> 

然後使用jquery一次更新所有的複選框：

<script> 
$(document).ready(function(){ 
    $(".selectAll").click(function() { 
     if($(".selectAll").attr("checked")) { 
      $(".the_checkbox:checkbox").attr("disabled", true); 
     } else { 
      $(".the_checkbox:checkbox").removeAttr("disabled"); 
     } 
    });   
}); 
</script> 

UPDATE：更改使用的答案。用於更新複選框而不是ID的類名，以便該ID可以保持唯一併符合HTML標準。

Answer 2

ID不允許以數字開頭，必須以字母開頭。所以document.getElementById(1234)將失敗（我認爲IE可能不會說出任何東西並允許它，但FF不起作用）。只要在號碼前加一個字母並將getElementById更改爲document.getElementById('cb'+id2);即可。

此外，只是一個方面說明，如果您通過this函數onClick，該參數是對被單擊元素的引用。所以沒有必要得到box.id，然後做document.getElementById(checkId)。從技術上說document.getElementById(checkId)是=== box所以你可以只說box.checked。

http://www.w3.org/TR/html4/types.html#h-6.2。這是關於ID屬性命名要求的規範：

ID和名稱標記必須以字母（[A-Za-z]）開頭，後面可以跟隨任意數量的字母，數字（[0 -9]），連字符（「 - 」），下劃線（「_」），冒號（「：」）和句點（「。」）。

編輯：

甚至比使用document.getElementById()選擇每個複選框，是使用document.getElementById()父元素所需的複選框以禁用共享（如它們在表）然後使用document.getElementsByTagName('input')獲取所有複選框的集合，並使用該複選框進行循環/禁用。所以JS代碼禁用會是什麼樣子：

一些表：

<input type='checkbox' onClick='checkCBs(this,"someTable1");'> 
<table id='someTable1'> 
    <tr> 
    <td>This is checkbox 1:</td> 
    <td><input type='checkbox' name='group1' value='checkbox1'></td> 
    </tr> 
    <tr> 
    <td>This is checkbox 2:</td> 
    <td><input type='checkbox' name='group1' value='checkbox2'></td> 
    </tr> 
</table> 

代碼：

function checkCBs(box, parent){ 
    var parent = document.getElementById(parent), 
     CBs = parent.getElementsByTagName('input'), 
     i; 
    //loop through all input elements 
    for(i=0;i<CBs.length;i++){ 
     //make sure the input is a checkbox 
     if(CBs[i].type && CBs[i].type=='checkbox'){ 
      //set disabled on this checkbox to opposite 
      //of whether box is checked. 
      CBs[i].disabled = !box.checked; 
     } 
    } 

}