Limit/deaktivieren/aktivieren Kontrollkästchen

Question

Ich habe ein Problem in Bezug auf diesen Link: Limiting default checked checkboxes.

Ich erweitere den Code für die Validierung des Skripts, das ist, was ich tun möchte.

1. Ich möchte ein Standard-Kontrollkästchen aktiviert.
2. Ich möchte die Auswahl der Checkbox zum Beispiel begrenzen: Wenn mvp 3 ist, sollte ich 3 auswählen und den Rest der Checkbox einfach so deaktivieren. Limit Checkbox.
3. Ich möchte Submit-Button deaktivieren, wenn die Auswahl nicht erreicht wird, zum Beispiel wenn die angegebene maximale Anzahl 5 ist. Die Submit-Schaltfläche wird nicht aktiviert, wenn die Auswahl nicht 5 überprüft wird.

Hier ist mein Beispielcode:

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); 
    } 
}); 

}); 

Hier ist die Geige: fiddle

am Beispiel Basierend i den Wert von mvp gesetzt in 5. der beim Laden der Seite gibt es Standard 5 Checkbox überprüft. Wenn Sie dann 1 deaktivieren, wird der Alarm ausgelöst, der besagt, dass Sie 5 MVPs haben sollten. Dann wird der Button deaktiviert. Sobald Sie ein Kontrollkästchen erneut aktivieren, wird die Schaltfläche angezeigt. aber es gibt 2 linke Checkboxen, die der Benutzer auswählen kann. Wenn der Benutzer jedoch 5 Auswahlen überschreitet, wird die Warnung erneut ausgelöst und an 5 markierte Kontrollkästchen zurückgegeben. Problem hier ist die Schaltfläche wird deaktiviert bleiben.

Können Sie mir helfen, diese Art von Logik zu tun: D Vielen Dank im Voraus ..

Answer 1

die Sie interessieren,

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 und Updated Demo

Answer 2

schreiben:

$("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

Sie nicht die Eigenschaft checked der Checkbox gesetzt sollte und deaktivieren Sie auch die Schaltfläche.

Hier gehen Sie:

$(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); 
     } 
    }); 
}); 

Arbeits Demo: http://jsfiddle.net/R79cM/