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

但我没有得到任何警报（既不是，也不是）。

那么，是的[]（方括号）在第二行是不正确的？或者我的if / else条件在JS中是错误的？

P.S。 SO或Google上的所有问题只涉及一个案例/对附：如果需要，我可以将yes []改为yes1，yes2，yes3等对应的sp1，sp2，sp3，其中1,2,3是For循环的$ i，但那么我将如何在JS中捕获/引用它？ BR />

_ 更新： _

流程/条件是（澄清）：
最初将禁用“特殊”复选框，并且将取消选中“确定”复选框然后，如果用户检查确定，则启用特殊功能如果用户想要，他可以勾选特殊如果以后用户改变思路并取消确定，则应取消特殊处理以及再次禁用。

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

您不能在Javascript中使用yes[]作为标识符，因此您必须使用名称作为字符串访问该字段：

document.mainForm["yes[]"]

这不会返回单个元素，它将返回一个元素数组。使用索引访问特定元素：

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

复选框的值始终为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/

如何禁用基于另一个复选框启用复选框？

3 个答案:

更新

更多更新