Stop checkbox to be checked

Question

I am studying JavaScript and test a function that I thought could prevent the checkbox from be checked (code sample):

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" charset="utf-8">
var myBox = document.getElementById('bike');
myBox.addEventListener('click', stopCheck, false);

function stopCheck(e){
    e.preventDefault();
}
</script>

<form action="">
<input type="checkbox" name="vehicle" value="Bike" id="bike" >I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

</body>
</html>

but the code does not work. Probably stopCheck is executed AFTER the checkbox changes the checked state. How to fix it?

No harm in practicing, but in real life you'd just add a `disabled` attribute to the checkbox. — JJJ, Oct 15 '13 at 14:50
@Juhana if you don't want to make a user angry >:-} I am sure 95% of software developers indeed want to make a user angry... — dbanet, Oct 15 '13 at 14:51
possible duplicate of [JavaScript getElementByID() not working](http://stackoverflow.com/questions/1829925/javascript-getelementbyid-not-working) — JJJ, Oct 15 '13 at 14:52
I try to understand events and the event bubbling, and the `preventDefault` function. — serge, Oct 15 '13 at 14:52
can't you just add the disabled attribute to the checkboxes? — Manuel van Rijn, Oct 15 '13 at 14:54
Nope I have not changed anything, I just took the link OP gave. Which is http://jsbin.com/ihExoWo/1/edit — Hanky Panky, Oct 15 '13 at 14:58
@Hanky웃Panky You added the disabled properties. The JavaScript doesn't work in your example. (Sorry, commented on wrong jsbin first) — JJJ, Oct 15 '13 at 14:58
Your are overlooking the link I guess. Ignore my code and see the OP's fiddle url. It works for me there without any changes. — Hanky Panky, Oct 15 '13 at 14:58
@Hanky웃Panky Well yes, it's not the same code as in the question. — JJJ, Oct 15 '13 at 14:59
Then that's something else, I would consider their own fiddle url to be an authoritative replica of the code in question. Its the difference between the code there and here which brought about this confusion. — Hanky Panky, Oct 15 '13 at 15:00

score 2 · Answer 1 · answered Oct 15 '13 at 14:54

2

Working DEMO

Your script is not able to find element.

Just move your script after form/before closing body tag.

answered Oct 15 '13 at 14:54

Gurpreet Singh

20,907
5
44
60

score 1 · Accepted Answer · answered Oct 15 '13 at 14:54

1

may be because when you use document.getElementById ,the Dom tree is not created fully yet. move the script below may helps:

<form action="">
<input type="checkbox" name="vehicle" value="Bike" id="bike" >I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
<script type="text/javascript" charset="utf-8">
var myBox = document.getElementById('bike');
myBox.addEventListener('click', stopCheck, false);

function stopCheck(e){
    e.preventDefault();
}
</script>

answered Oct 15 '13 at 14:54

ohmygirl

239
1
5

Their code already works : http://jsbin.com/ihExoWo/2/edit does what it intends to do – Hanky Panky Oct 15 '13 at 14:56
With that - document.getElementById('bike') - you'll just get one element. – marko Oct 15 '13 at 19:00

marko · Answer 3 · 2013-10-15T17:39:06.777

Use document.getElementsByName which returns an array of the elements with the names, in this case the checkboxes.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<script>
    window.onload = function() {
       var vehicle = document.getElementsByName("vehicle");

        for(var i=0;i<vehicle.length;i++){
            vehicle[i].onclick = function(e) {
                e.preventDefault();
            };
        }



    };

</script>

<form action="">
    <input type="checkbox" name="vehicle" value="Bike" id="bike" >I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car
</form>
</body>
</html>

Stop checkbox to be checked

3 Answers3