Ogranicz / wyłącz / włącz pole wyboru - javascript, jquery, checkbox

mam problem z tym linkiem:Ograniczanie domyślnie zaznaczonych pól wyboru.

Rozszerzam kod do sprawdzania poprawności skryptu, oto co chcę zrobić.

1. Chcę domyślnie zaznaczone pole wyboru.
2. chcę ograniczyć zaznaczenie pola wyboru na przykład: jeśli mvp ma wartość 3, powinienem wybrać 3 i wyłączyć resztę pola wyboru w ten sposób. Ogranicz pole wyboru.
3. Chcę wyłączyć przycisk wysyłania, jeśli wybór nie zostanie osiągnięty, na przykład, jeśli podana maksymalna liczba wynosi 5. przycisk wysyłania nie zostanie włączony, jeśli zaznaczenie nie zostanie zaznaczone.

Oto mój przykładowy kod:

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

});

Oto skrzypce: skrzypce

Na podstawie przykładu ustawiłem wartość mvp w 5. kiedy strona ładuje się, domyślnie 5 jest zaznaczone. wtedy jeśli odznaczysz 1, pojawi się ostrzeżenie, że powinieneś mieć 5 mvp, wtedy przycisk się wyłączy. po ponownym zaznaczeniu pola wyboru pojawi się przycisk. ale pozostały 2 pola wyboru, które użytkownik może zaznaczyć , ale jeśli użytkownik przekroczy 5 opcji, ostrzeżenie zostanie ponownie uruchomione i zwróci zaznaczone pola wyboru. Problem polega na tym, że przycisk pozostanie wyłączony.

Czy możesz mi pomóc w zrobieniu tego rodzaju logiki: Z góry dziękuję.

Odpowiedzi:

4 dla odpowiedzi № 1

Spróbuj tego,

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

Robocza wersja demonstracyjna i Zaktualizowana wersja demonstracyjna

---

1 dla odpowiedzi nr 2

Nie należy ustawiać zaznaczonej właściwości pola wyboru, a także wyłączać przycisk.

Proszę bardzo:

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

Wersja robocza: http://jsfiddle.net/R79cM/

---

0 dla odpowiedzi № 3

Pisać:

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

Zaktualizowano skrzypce tutaj.

---