チェックボックスを有効/無効にする

Question

私はこのリンクに関する問題があります：Limiting default checked checkboxes。

私はスクリプトの検証のためにコードを拡張します。ここでは何をしたいのですか？

1. デフォルトのチェックボックスをオンにします。
2. たとえば、mvpが3の場合、チェックボックスの選択を制限したいと思います.3を選択し、このように残りのチェックボックスを無効にする必要があります。 Limit Checkbox。
3. たとえば、指定された最大数が5であるなど、選択肢が届かない場合は、送信ボタンを無効にします。選択項目がチェックされていない場合、送信ボタンは有効になりません。

ここに私のサンプルコードは次のとおりです。

var mvp = 5; 

$(document).ready(function() { 


    $("input:checkbox").each(function(index) { 
     this.checked = (index < mvp); 
    }); 

$("input:checkbox").click(function() { 

    var bol = $("input:checkbox:checked").length != mvp; 

    if(bol){ 
    alert("You have to choose "+ mvp +" mvp's only"); 
    this.checked = false; 
    $("#button-cart").attr("disabled", true); 
    } 
    else{ 
    $("input:checkbox").not(":checked").attr("disabled",bol); 
    $("#button-cart").attr("disabled", false); 
    } 
}); 

}); 

はここでフィドルです：ページがデフォルトの5のチェックボックスがありますロードするとき、私は5でMVPの値を設定する例に基づいてfiddle

チェック1をオフにすると、5 mvpの警告が表示され、ボタンが無効になります。チェックボックスをもう一度チェックすると、ボタンが表示されます。ユーザーが選択できる2つのチェックボックスがあります。ユーザーが5つの選択肢を超えると、アラートは再びトリガーし、5つのチェックボックスに戻ります。ここでの問題はボタンが無効のままであることです。

あなたは私がこの種のロジック行うのを助けることができる：事前にDのおかげで...

Answer 1

は、ページの読み込み時に

var mvp = 5; 
$(document).ready(function() { 
    $("input:checkbox").each(function (index) { 
     this.checked = (index < mvp); 
    }).click(function() { 
     en_dis= $("input:checkbox:checked").length < mvp 
     $('#button-id').prop('disabled', en_dis); 
     // to disable other checkboxes 
     $('input:checkbox:checked').length >= mvp && 
      $("input:checkbox:not(:checked)").prop('disabled',true); 
    }).change(function() { 
     if ($(this).siblings(':checked').length >= mvp) { 
      this.checked = false; 
     } 
    }); 
}); 

Working DemoとUpdated Demo

Answer 2

書き込み：

$("input:checkbox").each(function (index) { 
    this.checked = (index < mvp); 
}); 
$("#button-id").attr("disabled", true); 
disable(); 
$("input:checkbox").change(function() { 
    var bol = $("input:checkbox:checked").length != mvp; 
    if (bol) { 
     alert("You have to choose " + mvp + " mvp's only");    
     $("#button-id").attr("disabled", true); 
     enable(); 
    } else { 
     $("input:checkbox").not(":checked").attr("disabled", bol); 
     $("#button-id").attr("disabled", false); 
     disable(); 
    }   
}); 
function enable(){ 
    $("input:checkbox").not(":checked").each(function(){ 
     $(this).removeAttr("disabled"); 
    }); 
} 
function disable(){ 
    $("input:checkbox").not(":checked").each(function(){ 
     $(this).attr("disabled","disabled"); 
    }); 
} 

Updated fiddle here.

Answer 3

あなたは、チェックボックスのcheckedプロパティを設定しないでくださいボタンを無効にします。ここで

あなたが行く：

$(function() { 
    var $button = $('#button-id'), 
     mvp  = 5; 

    $("input:checkbox").each(function (index) { 
     this.checked = (index < mvp); 
    }).on("click", function() { 
     if ($("input:checkbox:checked").length != mvp) { 
      alert("You have to choose " + mvp + " mvp's only"); 
      $button.prop("disabled", true); 
     } else { 
      $("input:checkbox").not(":checked").prop("disabled", false); 
      $button.prop("disabled", false); 
     } 
    }); 
}); 

の作業のデモ：http://jsfiddle.net/R79cM/