如何禁用基於另一個復選框的啟用復選框？

Question

以下代碼由for循環生成。

<form action="saveresponse.php" method="POST" name="mainForm">

<input class="cbox_yes" type="checkbox" name="yes[]" value="01.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="01.jpg" disabled />Special<br />

<input class="cbox_yes" type="checkbox" name="yes[]" value="02.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="02.jpg" disabled />Special<br />

etc etc upto n times...

現在，我要的是在頁面加載時，僅當用戶選中了它們對應的yes []復選框時，才應禁用和啟用所有sp []復選框。

我正在使用的Javascript代碼：（僅檢查JS是否正在捕獲yes []復選框的狀態？

function spenable(){
        var yes = document.mainForm.yes[].value;
            if (yes == true)
                //alert("true");
                document.mainForm.yes[].value = checked;
            else
                //alert("false");
                document.mainForm.yes[].value = checked;
        };
    };

但是我沒有收到任何警報（不是，不是）。

那么，第二行中的yes []（方括號）是否不正確？ 還是我的if / else條件在JS中出錯？

PS在SO或Google上的所有問題僅涉及一個案例/一對。
PS如果需要，我可以將yes []更改為yes1，yes2，yes3等，以及相應的sp1，sp2，sp3，其中1,2,3是For循環的$ i，但是我將如何在JS中捕獲/引用它？

_ 更新： _

流程/條件為（澄清）：
最初，“特殊”復選框將被禁用，“確定”復選框將被取消選中。
然后，如果用戶選中“確定”，則會啟用“特殊”。
如果用戶需要，他可以勾選特殊。
如果以后用戶改變主意並取消選擇“確定”，則應取消選中“特殊”並再次禁用它。

Answer 1

為了簡單起見，我在這里使用了jQuery。

$("input[name='yes[]']").change(function() {      //When checkbox changes
    var checked = $(this).attr("checked");
    $(this).next().attr("disabled", !checked);    //The next checkbox will enable
});​                                               // or disable based on the
                                                  // checkbox before it

演示： http ： //jsfiddle.net/DerekL/Zdf9d/
純JavaScript： http ： //jsfiddle.net/DerekL/Zdf9d/1/

更新資料

當選中特殊復選框時，它將取消選中第一個復選框。
純JavaScript： http ： //jsfiddle.net/DerekL/Zdf9d/2/

更多更新

這是演示：
純JavaScript： http ： //jsfiddle.net/DerekL/Zdf9d/3/
jQuery： http ： //jsfiddle.net/DerekL/Zdf9d/4/

_{小提示： document.querySelectorAll可在所有現代瀏覽器和IE8 +（包括IE8）上使用。 如果要支持IE6，最好使用jQuery 。}

Answer 2

您不能在腳本中使用yes[]作為標識符，因此必須使用名稱作為字符串來訪問字段：

document.mainForm["yes[]"]

這將不會返回單個元素，而是將返回一個元素數組。 使用索引訪問特定元素：

document.mainForm["yes[]"][0]

無論是否選中復選框，復選框的value將始終是value屬性。 使用checked屬性來查找是否已選中：

function spenable() {
  var yes = document.mainForm["yes[]"][0].checked;
  if (yes) {
    alert("true");
  } else {
    alert("false");
  };
}

要訪問已單擊的特定復選框，請在事件調用中發送該復選框的索引：

<input class="cbox_yes" type="checkbox" name="yes[]" value="01.jpg" onclick="spenable(0);" /> OK

在函數中使用索引：

function spenable(idx) {
  var yes = document.mainForm["yes[]"][idx].checked;
  var sp = document.mainForm["sp[]"][idx];
  sp.disabled = !yes;
}

Answer 3

如果您願意使用jQuery：

$('input[type="checkbox"]').click(function(){
    var obj = $(this);
    obj.next('.cbox_sp').attr({'disabled':(obj.is(':checked') ? false : 'disabled')});
});

該解決方案將為所有復選框分配一個onclick事件處理程序，然后檢查是否應禁用相應的“特殊”復選框。 還將默認檢查狀態設置為true。

工作示例： http : //jsfiddle.net/6YTqC/