Question

我正在尝试使用javascript检查另一个复选框时启用已禁用的复选框。我相信我的问题是当我试图将表单信息传递给javascript时。

这是我的HTML：

 <form id="checkboxes">
            <input type="checkbox" name="checkboxa" onclick="javascript:ToggleSwitch(form)" />1
            <input type="checkbox" name="checkboxb" disabled="true" />2
        </form>

这是我的Javascript：

  <script type="text/javascript">
var form= document.getElementById("checkboxes")
function ToggleSwitch(form) {
    if (form.elements["checkboxa"].checked) 
   form.elements["checkboxb"].disabled = false
} else {
   form.elements["checkboxb"].disabled = true
}
</script>

Answer 1

您在javascript中错过了{和}。试试这个：

var form= document.getElementById("checkboxes")
function ToggleSwitch(form) {
    if (form.elements["checkboxa"].checked) { // here
       form.elements["checkboxb"].disabled = false
    } else {
       form.elements["checkboxb"].disabled = true
    }
} // and here

Answer 2

像这样改变你的onclick事件

onclick="javascript:ToggleSwitch(this.form)"

并且您也不需要var form= document.getElementById("checkboxes")，因为您已经将它作为参数从onclick事件传递。

你也错过了一个括号

这是js

  <script>
    function ToggleSwitch(form) {
        if (form.elements["checkboxa"].checked) {
            form.elements["checkboxb"].disabled = false
        } else {
            form.elements["checkboxb"].disabled = true
        }
    }

</script>

这是html

  <form id="checkboxes">
<input type="checkbox" name="checkboxa" onclick="javascript:ToggleSwitch(this.form)" />1
<input type="checkbox" name="checkboxb" disabled="disabled" />2
</form>

这是一个demo

Answer 3

首先，您的javascript中存在语法错误（{语句中缺少if）。

您的功能也有一些冗余。基本上就是这种模式：

if (x) { return true; } else { return false; };

可以简化为

return x;

这是一个稍微不同的方法，将这些点考虑在内，同时也不需要在整个文档中搜索id（这通常会使事情更具可移植性/可重用性）。

<html>
  <head>
    <script type="text/javascript">
      function ToggleSwitch(el, other) {
        el.form.elements[other].disabled = !el.checked;
      }
    </script>
  </head>
  <body>
    <form id="checkboxes">
      <input type="checkbox" name="checkboxa" onclick="ToggleSwitch(this, 'checkboxb')" />1
      <input type="checkbox" name="checkboxb" disabled="true" />2
    </form>
  </body>
<html>

使用javascript检查另一个复选框时启用复选框

3 个答案: