-2

チェックボックスがあり、ユーザーに最大3つ選択してもらいたいのですが、これを行う方法がわかりません。

artificial intelligence <input type = "checkbox" name = "topic[]" value = "29"  >
computer graphics <input type = "checkbox" name = "topic[]" value  = "30" >
computer animation <input type = "checkbox" name = "topic[]" value = "31" >
software engineering <input type = "checkbox" name = "topic[]" value = "32" >
4

4 に答える 4

7

UI がこれをどのように処理するか考えたことはありますか? jQuery を使用したアプローチの 1 つを次に示します。

// adjust this to be all checkboxes in the group
var theCheckboxes = $("input[type='checkbox']"); 

theCheckboxes.click(function()
{
    if (theCheckboxes.filter(":checked").length > 3)
        $(this).removeAttr("checked");
});

http://jsfiddle.net/jyYu5/

これにより、3 つがマークされた後のチェックが回避されますが、フィールドが視覚的に無効になることはありません。したがって、それは考慮すべき追加事項です。

また、サーバー側でマークされているのは 3 つだけであることを確認する必要があります。これは、ユーザーが必要なデータを送信できることは明らかであるためです。

于 2012-04-15T21:10:14.450 に答える
0

jQuery を使用すると、次のようにチェックされたチェックボックスをカウントできます。

//Count number of checkboxes

$('input[name="type[]"]').on('click', function() {
    var nbcheck = $('input[name="type[]"]:checked').length;
    if(nbcheck > 2) {
        console.log('FORBIDEN!!!!');
        //Do stuffs you want -->
    }
});
于 2015-04-26T20:15:13.937 に答える
0

jQuery を使用すると、これを非常に簡単に行うことができます。おそらく、ストレートな JavaScript を使用すると少し難しくなりますが、それほどではありません。

jQuery をロードし、チェックボックスのクリックで実行する関数を記述します。その関数には、現在チェックされていないボタンと、現在チェックされているボタンの数が x を超えているかという 2 つのことを尋ねる if ステートメントがあります。両方が true の場合、デフォルトを防止します。

これは次のようになります。

<input class="checkbox"></input>

$('.checkbox').click(function(){
    if ($(this:not(:checked)) && $(".checkbox:checked").length >= 3) {
       event.preventDefault()
    }
});

これにより、3 つ以上のチェック ボックスをオンにできなくなります。

于 2012-04-15T21:08:03.313 に答える
0

明らかに、クライアント側の検証が必要です.... JavaScriptを使用してください....

それを行うにはいくつかの方法があります...

プレーンなJavaScriptのように、次のようなことができます

<script>
var predefined_limit = 3;
document.getElementByTagName('input').onchange = doSomething


function doSomething(){
    var counter=0;
    var elem = document.getElementByTagName('input');
    for(var i=0; i<elem.length; i++)
        if(elem.type=='checkbox' && elem.checked == true)
            counter ++;
    if(counter > predefined_limit){  
        this.checked = false;   
        alert('You can check only '+ predefined_limit + 'checkboxes')
    } 
}
</script>

次に、他の回答が示唆するように、jQueryまたは他のjavascriptフレームワークを使用することもできます

于 2012-04-15T21:09:35.017 に答える