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

Answer 2

首先，如果禁用按钮，则应从CSS .button-grey class

中删除此行

cursor: pointer;

其次，如果您使用addEventListener

，则不会使用内联事件处理程序

function checked(e) {
    var submit = document.getElementById("btnSubmit");
    // since checkbox is unchecked by default there's no need to check if is checked
    submit.classList.toggle("button-grey");
    submit.classList.toggle("button-orange");
    submit.disabled = !submit.disabled;
}

var chkBox = document.getElementById("chkBox");

chkBox.addEventListener("change", checked);

Demonstration

我还对您的HTML进行了一些更改：

从复选框中删除内联事件处理程序，并将ID添加到chkBox;
更改按钮类型以提交，并将ID设置为btnSubmit。

单击复选框启用提交按钮

2 个答案: