Question

I am building a mobile webapp with jquery mobile. Now what I want 2 things to do. One thing is that only one checkbox can be checked. Another thing is that when there comes another checkbox I don’t want to modify my javascript.

My html

<input type="checkbox" name="checkbox-zaal1" id="checkbox-1" onClick="CountChecks('checkbox-1')"/>
                    <label for="checkbox-1">Zaal 1</label>

                    <input type="checkbox" name="checkbox-zaal2" id="checkbox-2" onClick="CountChecks('checkbox-2')"/>
                      <label for="checkbox-2">Zaal 2</label>

                    <input type="checkbox" name="checkbox-zaal3" id="checkbox-3" onClick="CountChecks('checkbox-3')"/>
                    <label for="checkbox-3">Zaal 3</label>

And my javascript

function CountChecks(which) {
        var maxchecked = 1;
        var count = 0;
        for (i=0;i<=3;i++){
            if(eval('document.getElementById("checkbox-"+ i).checked == true')) { count++; }
        }
        if(count > maxchecked) {
            eval('document.getElementById("' + which + '").checked = false');
            alert('Sorry je kan enkel maar 1 meeting room reserveren');
        }
    }

So as you can see in my javascript. I want to change the 3 in the for loop in the amount off checkboxes on my pages. There is also something wrong with my first eval function. But I can’t figure it out.

Could you help me ?

Thank you

Answer 1

Use radio buttons instead of check boxes and give them all the same name. And then don’t use javascript at all.