1

以下代码由 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...

现在，我想要的是在页面加载时，所有 sp[] 复选框应该被禁用和启用，只有当它们对应的 yes[] 复选框被用户选中时。

我正在使用的 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 中捕获/引用它？

_更新： _

流程/条件是（澄清）：
最初特殊复选框将被禁用，并且确定复选框将被取消选中。
然后，如果用户选中 Ok，则启用 Special。
如果用户愿意，他可以勾选特别。
如果稍后用户改变主意并取消勾选 OK，Special 应该取消勾选并再次禁用。

4

3 回答 3

4

为了简单起见，我在这里使用了 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 。

于 2012-06-29T17:37:31.330 回答
2

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

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;
}
于 2012-06-29T17:40:25.257 回答
2

如果您愿意使用 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/

于 2012-06-29T17:47:21.127 回答