2010年1月15日金曜日

チェックボックスの選択数を制限する

<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript">
<!--
    function count_check(event) {
        var item = Event.element(event);
        var limit = 2;
        var cnt = $('counter').innerHTML;
        if (item.checked) {
            cnt++;
        }
        else {
            cnt--;
        }
        if (cnt > limit) {
            alert("チェックは"+limit+"つまでです")
            item.checked = false;
        }
        else {
            $('counter').innerHTML = cnt;
        }
    }
//-->
</script>
<p>
    チェックは 2つまで<BR>
    <input type="checkbox" name="data[]" id="c31" />
    <input type="checkbox" name="data[]" id="c32" />
    <input type="checkbox" name="data[]" id="c33" />
    <div id="counter" style="display: none;">0</div>
</p>
<script type="text/javascript">
    Event.observe('c31', 'click', count_check);
    Event.observe('c32', 'click', count_check);
    Event.observe('c33', 'click', count_check);
</script>

0 件のコメント:

コメントを投稿