Question

我已经尝试了一些选中复选框时启用提交按钮的例子，但我无处可去。以下是我的一次尝试，其中提交按钮被禁用，直到选中该复选框。请让我知道我错过了什么。

function checked(sub1) {
  var myLayer = document.getElementById(sub1);
  var input = myLayer.childNodes[0];
  if (input.checked == true) {
    myLayer.disabled = "";
  } else {
    myLayer.disabled = "disabled";
  }
}

<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
  <input type="checkbox" id="termsChkbx " onchange="checked('sub1')" />
</p>

<p>
  <input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>

Answer 1

没有人解释为什么您的代码无效。

首先，您没有正确选择input复选框元素。它不是按钮元素的子节点。您可以通过在this事件中传递onchange来获取对该复选框的引用，也可以传递event对象并通过event.target属性访问checkbox元素：

例如：

<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />

然后，您可以访问对更改事件触发的复选框元素的引用：

function isChecked(checkbox, sub1) {
  // checkbox
}

更改了几件事后，它会按预期工作：

function isChecked(checkbox, sub1) {
    var button = document.getElementById(sub1);

    if (checkbox.checked === true) {
        button.disabled = "";
    } else {
        button.disabled = "disabled";
    }
}

但是，您可以简化代码并将其重写为：

Example Here

<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />

function isChecked(checkbox, sub1) {
    document.getElementById(sub1).disabled = !checkbox.checked;
}

作为旁注，我强烈建议使用不引人注目的JavaScript并向元素添加事件监听器，以避免内联onchange事件：

Example Here

document.getElementById('termsChkbx').addEventListener('click', function (e) {
  document.getElementById('sub1').disabled = !e.target.checked;
});

Answer 2

试试这个

<input type="checkbox" id="termsChkbx " onchange="isChecked(this,'sub1')"/></p>
 <p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

JS

function isChecked(chk,sub1) {
    var myLayer = document.getElementById(sub1);
    if (chk.checked == true) {
        myLayer.disabled = false;
    } else {
        myLayer.disabled = true;
    };
}

的 PLUNKR

Answer 3

这是完整的代码

<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    <input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

<script type = "text/javascript">
function change_button(checkbx,button_id) {
    var btn = document.getElementById(button_id);
    if (checkbx.checked == true) {
        btn.disabled = "";
    } else {
        btn.disabled = "disabled";
    }
}
</script>

Answer 4

尝试使用此JQuery函数

$(function() {
    $('#termsChkbx').click(function() {
        if ($(this).is(':checked')) {
            $('#sub1').removeAttr('disabled');
        } else {
            $('#sub1').attr('disabled', 'disabled');
        }
    });
});

示例

Answer 5

使用浏览器的调试控制台可以轻松检查主要问题。在那里你可以立即看到一个例外。

试试这个：

HTML：

<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    <input type="checkbox" id="termsChkbx" onchange="checked('sub1', this.checked);" />
</p>
<p>
    <input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>

JavaScript的：

function checked(sub1, checkedState) {
    document.getElementById(sub1, this).disabled = !checkedState;
}

但请注意，此代码段不是最佳做法。它只是在不使用像jQuery这样的库的情况下解决了当前的问题。

Answer 6

虽然您的问题已经解决，但此处不需要JavaScript。这可以使用纯CSS / HTML完成：

input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}

<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>

我已经使用:not()伪类来检测何时未勾选复选框，因为这是w3c's recommended approach。我不确定复选框与按钮的相关位置（以HTML格式显示），因此我使用了波形符（~ general sibling selector）来查找按钮。如果复选框紧接在按钮之前，我建议使用adjacent sibling selector +。

但是，如果您有多个复选框，并且只需要一个复选框来切换按钮的状态，那么使用:nth-of-type伪类或id可能更合适：

input[type="checkbox"]:nth-of-type(2):not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>

否则，按钮变为可点击的所有复选框都是“必需的”：

input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>

选中复选框时启用提交按钮

6 个答案: