javascript - 单击复选框启用提交按钮

Question

这应该很简单，但我遗漏了一些东西。

我正在创建一个表单，要求用户接受条款和条件，并希望禁用提交按钮，直到他们单击复选框，但无法让它工作(我不擅长 JavaScript)

在这里查看:http://jsfiddle.net/timothylarson/NEE3V/4/

HTML:

<form action="" method="get">
    <p><input type="checkbox" value="checkbox" onchange="checked('accept')" /> I HAVE READ AND ACCEPT THE <a href="">TERMS & CONDITIONS</a></p>
    <br/>
    <input disabled="disabled" type="button" id="accept" class="button-grey" value="Submit" />
</form>

Javascript:

function checked(accept) {
    var myLayer = document.getElementById(accept);
    var input = myLayer.childNodes[0];
    if (input.checked == true) {
        myLayer.class = "button-orange";
        myLayer.disabled = "";
    } else {
        myLayer.class = "button-grey";
        myLayer.disabled = "disabled";
    };
}

CSS:

p {
    font-family:'Lato', sans-serif;
}
.button-orange {
    text-shadow: 2px 2px #321;
    float:left;
    width: 100%;
    border: #fbfbfb solid 4px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 3px #999;
    cursor:pointer;
    background-color: #E74700;
    color:white;
    font-size:24px;
    padding-top:22px;
    padding-bottom:22px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin-top:-4px;
    font-weight:700;
}
.button-orange:hover {
    background-color: red;
}
.button-grey {
    text-shadow: 2px 2px #321;
    float:left;
    width: 100%;
    border: #fbfbfb solid 4px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 3px #999;
    cursor:pointer;
    background-color: #999;
    color:white;
    font-size:24px;
    padding-top:22px;
    padding-bottom:22px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin-top:-4px;
    font-weight:700;
}

Answer 1

您现有的代码存在一些这样的问题

1- 要更改类，您需要使用 className 属性而不是 class
2- mLayer 是一个按钮元素。所以没有子元素出现

var input = myLayer.childNodes[0]; 

此处的 input 不会是 checkbox 元素，因此您的代码将无法工作。

3- 更改了函数名称，并且保留了checked。

我已在您的代码中进行了上述更正。所以试试这个

function checkedChanged(element) {

    var myLayer = document.getElementById('accept');
    if (element.checked == true) {
        myLayer.className = "button-orange";
        myLayer.disabled = "";
    } else {
        myLayer.className = "button-grey";
        myLayer.disabled = "disabled";
    };
}

用此更改复选框标记

<input type="checkbox" value="checkbox" onchange="checkedChanged(this)" />

Js Fiddle Demo