Max antal radio buttons valg

Det ville nok være smartere at bruge checkbox i et lille div layer og så skal du have et script der tæller hvor mange der er aktive og skjuler og viser afhængig af om der er ledige valg og hver gang brugeren foretager et valg så revaliderer du formen.

<div class="max5">   
            <input type="checkbox" id="Checkbox0" />
            <input type="checkbox" id="Checkbox1" />
            <input type="checkbox" id="Checkbox2" />
            <input type="checkbox" id="Checkbox3" />
            <input type="checkbox" id="Checkbox4" />
            <input type="checkbox" id="Checkbox5" />
            <input type="checkbox" id="Checkbox6" />
            <input type="checkbox" id="Checkbox7" />
        </div>



    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>   
    <script type="text/javascript">       
        $(document).ready(function(){
                var i = 0;
            $(".max5 input[type=checkbox]").each(function(){       
                $(this).click(function(){
                        $(this).removeAttr('index');                                           
                        if($(this).is(':checked'))
                        {                                                   
                            $(this).attr('index', i++);                                               
                        }
                       
                        y = 5000;
                        var elm;
                        if($(".max5 input[index]").length > 5)
                        {       
                                   
                            $(".max5 input[index]").each(function(){
                   
                                if(y > $(this).attr('index'))
                                {
                                    y = $(this).attr('index');                                   
                                    elm = $(this);
                                }
                            });
                       
                            $(elm).removeAttr('index');
                            $(elm).removeAttr('checked');
                        }
                });
            });
        });       
    </script>

Her er en anden mulighed end jokkejensen udmærkede forslag:

Du har et style element, der bruges til at vise eller skjule checkbox elementerne. Hvis du ikke bryder dig om styling, så kan jeg godt flytte den ned til scriptet istedet.

<style type="text/css">
.checkbox_hidden {
    visibility: hidden;
}

.checkbox_visible {
    visibility: visible;
}
</style>

Du har et dynamisk script:

<script type='text/javascript'>
function evalchoices(choice_num, recursive_action) {
    var choice_count = 0;
    if (document.getElementById("choices_formname" + choice_num)) {
        var form_name = document.getElementById("choices_formname" + choice_num).value;
        if (document.getElementById("choices_name" + choice_num)) {
            var choice_name = document.getElementById("choices_name" + choice_num).value;
            if (document.getElementById("choices_max" + choice_num)) {
                var choices_max = parseInt(document.getElementById("choices_max" + choice_num).value);
                var choiceform = document.forms[form_name];
                for (var i = 0; i < choiceform.length; i++) {
                    if (recursive_action) {
                        try {
                            if (choiceform.elements[i].name == choice_name) {
                                if (!choiceform.elements[i].checked)
                                    choiceform.elements[i].className = 'checkbox_hidden';
                            }
                        } catch (err) {
                            // err handling - her ingen.
                        }
                    } else {
                        if (choice_count < choices_max) {
                            try {
                                if (choiceform.elements[i].name == choice_name) {
                                    if (choiceform.elements[i].checked)
                                        choice_count += 1;
                                    else choiceform.elements[i].className = 'checkbox_visible'; ;
                                }
                            } catch (err) {
                                // err handling - her ingen.
                            }
                        } else {
                            return evalchoices(choice_num, true);
                        }
                    }
                }
            }
        }
    }
}

og så har du din formular, her med to eksempler, basis parametre angives i hidden felter:

<form id='choices' name='choices' action='' method='post'>

<h2>Musik</h2>

<input type='hidden' id='choices_formname1' value='choices'/>
<input type='hidden' id='choices_name1' value='music_choice' />
<input type='hidden' id='choices_max1' value='5' />
<input id="music1" type="checkbox" name="music_choice" onclick='evalchoices(1)' value='1' /><label for='music1'>Musik 1</label><br />
<input id="music2" type="checkbox" name="music_choice" onclick='evalchoices(1)' value='2' /><label for='music2'>Musik 2</label><br />
<input id="music3" type="checkbox" name="music_choice" onclick='evalchoices(1)' value='3' /><label for='music3'>Musik 3</label><br />
<input id="music4" type="checkbox" name="music_choice" onclick='evalchoices(1)' value='4' /><label for='music4'>Musik 4</label><br />
<input id="music5" type="checkbox" name="music_choice" onclick='evalchoices(1)' value='5' /><label for='music5'>Musik 5</label><br />
<input id="music6" type="checkbox" name="music_choice" onclick='evalchoices(1)' value='6' /><label for='music6'>Musik 6</label><br />
<input id="music7" type="checkbox" name="music_choice" onclick='evalchoices(1)' value='7' /><label for='music7'>Musik 7</label><br />
<input id="music8" type="checkbox" name="music_choice" onclick='evalchoices(1)' value='8'/><label for='music8'>Musik 8</label><br />
<input id="music9" type="checkbox" name="music_choice" onclick='evalchoices(1)' value='9' /><label for='music9'>Musik 9</label><br />

<h2>Bands</h2>

<input type='hidden' id='choices_formname2' value='choices'/>
<input type='hidden' id='choices_name2' value='band_choice' />
<input type='hidden' id='choices_max2' value='3' />
<input id="band1" type="checkbox" name="band_choice" onclick='evalchoices(2)' value='10' /><label for='band1'>Band 1</label><br />
<input id="band2" type="checkbox" name="band_choice" onclick='evalchoices(2)' value='11' /><label for='band2'>Band 2</label><br />
<input id="band3" type="checkbox" name="band_choice" onclick='evalchoices(2)' value='12' /><label for='band3'>Band 3</label><br />
<input id="band4" type="checkbox" name="band_choice" onclick='evalchoices(2)' value='13' /><label for='band4'>Band 4</label><br />
<input id="band5" type="checkbox" name="band_choice" onclick='evalchoices(2)' value='14' /><label for='band5'>Band 5</label><br />
<input id="band6" type="checkbox" name="band_choice" onclick='evalchoices(2)' value='15' /><label for='band6'>Band 6</label><br />
<input id="band7" type="checkbox" name="band_choice" onclick='evalchoices(2)' value='16' /><label for='band7'>Band 7</label><br />
<input id="band8" type="checkbox" name="band_choice" onclick='evalchoices(2)' value='17' /><label for='band8'>Band 8</label><br />
<input id="band9" type="checkbox" name="band_choice" onclick='evalchoices(2)' value='18' /><label for='band9'>Band 9</label><br />

</form>

Der var noget jeg havde overset. Efter at choice_count bliver talt op skal der selvfølgelig være et ekstra check på at antal er inden for grænsen for ellers bliver valg i sidste checkbox jo ignoreret.

try {
    if (choiceform.elements[i].name == choice_name) {
        if (choiceform.elements[i].checked) {
            choice_count += 1;
            if (choice_count == choices_max)
                return evalchoices(choice_num, true);
        }
        else choiceform.elements[i].className = 'checkbox_visible';  ;
    }
} catch (err) {
    // err handling - her ingen.
}