Setting check box to lock after a certain event.

Question

So I am new to coding and am just trying to make a simple background project for something a friend and I thought up. I am using HTML for this just to start. I want to make a list of checkboxes with the fifty states and a progress bar. Now as you click each state's checkbox the bar fills up and then when you have clicked all fifty then a check box at the top of the screen next to the progress bar is checked and there is a small saying under each saying Congratulations!

If anyone can help me I would be greatly appreciative!

Thank you, Kaxwell.

score 0 · Answer 1 · answered Aug 17 '15 at 07:05

0

It is unfortunately not possible to perform all this using only HTML. You can build form etc. with HTML. The logic has to be managed by some other language. I suggest JavaScript in this case. Have a look at W3Schools to start with it. Good luck

answered Aug 17 '15 at 07:05

quicky

97
2
14

Ahs N · Answer 2 · 2015-08-17T07:55:40.010

Using bootstrap and JQuery, you could achieve it:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-10">
            <div class="progress">
                <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="col-xs-2">
            <input id="ccomplete" class="form-control" type="checkbox" />
        </div>
    </div>
    <div id="main" class="row">
        <input class="form-control" type="checkbox" />
    </div>
</div>

Here is the JSFiddle demo with the complete code

I encourage you to learn javascript/jquery for such manipulations.

The above demo uses JQuery and Bootstrap frameworks.

Setting check box to lock after a certain event.

2 Answers2