javascript - フォームのチェックボックスを制限する

Question

チェックボックスのセットを含むHTMLフォームがありますが、ユーザーがそれらの固定数のみをチェックできるようにする方法

Answer 1

この例では、各入力がチェックされた後にチェックされた入力の数をカウントし、許可されている最大数と比較します。最大数を超えると、残りのチェックボックスは無効になります。

jQuery(function(){
    var max = 3;
    var checkboxes = $('input[type="checkbox"]');

    checkboxes.change(function(){
        var current = checkboxes.filter(':checked').length;
        checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
    });
});

これが実際の例です - http://jsfiddle.net/jaredhoyt/Ghtbu/1/

Answer 2

これにより、現在のフォームでいくつのチェックボックスがチェックされているかを確認するロジックが各チェックボックスにバインドされます。その数が 2 の場合、他のすべてのボックスを無効にします。

$("form").on("click", ":checkbox", function(event){
  $(":checkbox:not(:checked)", this.form).prop("disabled", function(){
    return $(this.form).find(":checkbox:checked").length == 2;
  });
});

これはフォームごとに機能します。つまり、相互の入力に触れない複数のフォームを持つことができます。以下のデモでは、3 つのフォームを紹介していますが、そのすべてに 3 つのチェックボックスが含まれています。2 つのチェックボックスの制限は、それぞれのフォームに限定されます。

デモ: http://jsbin.com/epanex/4/edit