Enable submit button on checkbox click

Question

This should be simple, but I'm missing something.

I am creating a form which asks users to accept terms and conditions and would like to disable the submit button until they click the checkbox, but can't get it to work (I'm not great at javascript)

Check it out here: 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;
}

You should really use minimal, complete, tested and readable code for your question. You need almost none of that CSS to demonstrate the problem (just enough to show a contrast between the two classes, with perhaps a background-color, would be enough). — David Thomas
– David Thomas, Commented Jan 18, 2014 at 21:19
This ought to be in a fiddle if you can, with light code samples. — digitalextremist
– digitalextremist, Commented Jan 18, 2014 at 21:25

Sachin · Accepted Answer · 2014-01-18 21:14:07Z

1

Your existing code a some issues like this

1- To change the class you need use className property not the class
2- mLayer is a button element. So there is no child element presents

var input = myLayer.childNodes[0];

here input will not the checkbox element and thus your code won't work.

3- Changed the function name as well checked is reserved.

I have made above correction in your code. So try this

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";
    };
}

Change Checkbox markup with this

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

Js Fiddle Demo

edited Jan 18, 2014 at 21:14

answered Jan 18, 2014 at 21:08

Sachin

41.1k7 gold badges94 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Thomas Over a year ago

Interesting, but shouldn't disabled be a Boolean (true/false)?

Sachin Over a year ago

@DavidThomas in HTML5, <input type="text" disabled /> is valid. in XHTML <input type="text" disabled="disabled" /> is also valid. So there is no need of true/false.

David Thomas Over a year ago

My point precisely, which is why I'm wondering why you've used myLayer.disabled = "" and myLayer.disabled = "disabled"? Your approach works, so I have no problem with it, I am, though, curious as to why you chose that approach.

Sachin Over a year ago

That helps to remove the disabled attribute from the element. If you see the console and do check/uncheck, you can see the desired change in markup.

user3052866 · Accepted Answer · 2014-01-18 21:30:06Z

1

At first if you disable button you should remove this line from CSS .button-grey class

cursor: pointer;

Second, instead of using inline event handler, would be better if you use 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

I also made some changes to your HTML:

Remove inline event handler from checkbox and add id to chkBox;
Change button type to submit and id to btnSubmit.

edited Jan 18, 2014 at 21:30

answered Jan 18, 2014 at 21:21

user3052866

463 bronze badges

Collectives™ on Stack Overflow

Enable submit button on checkbox click

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related