Wie Sie Kontrollkästchen mit Javascript deaktivieren

Question

Ich habe den folgenden Code. Ich muss sehen, wie viele Kontrollkästchen in meiner Form und wenn es mehr als vier Anzeigefehler sind, und deaktivieren Sie das letzte Kontrollkästchen aktiviert wurde, alles funktioniert, aber wie kann ich deaktivieren Sie das letzte Kontrollkästchen dank

function SetHiddenFieldValue() 

    { 
     var checks = document.getElementById('toppings').getElementsByTagName('input'); 
     var toppings = new Array(); 
     var randomNumber = Math.floor((Math.random() * 9000) + 100); 
     var totalChecked = 0; 
     var itemPrice = 5.99; 

    for (i = 0; i < checks.length; i++) 
    { 
     if (checks[i].checked) 
     { 
      toppings[i] = checks[i].value; 
      totalChecked += 1; 
     } 
    } 

    if (totalChecked > 4) { 
     alert("You can only choose up to Max of 4 Toppings"); 
    } else {  
     itemPrice = itemPrice + (totalChecked * 0.99); 
     document.getElementById('my-item-name').value = toppings.join("\t"); 
     document.getElementById('my-item-id').value = randomNumber; 
     document.getElementById('my-item-price').value = itemPrice; 
    } 
} 

und meine Form ist:

<form id="pizza" name="pizza" method="post" action="" class="jcart"> 
    <input type="hidden" name="my-item-id" id="my-item-id" value="" /> 
    <input type="hidden" name="my-item-name" id="my-item-name" value="" /> 
    <input type="hidden" name="my-item-price" id="my-item-price" value="" /> 
    <input type="hidden" name="my-item-qty" value="1" /> 
    <input type="submit" name="my-add-button" value=" add " /> 
</form> 

Answer 1

verfolgen Sie die zuletzt geprüft Checkbox und legen Sie seine checked Eigenschaft false:

// ... 
var lastChecked; // Will be used in loop below 
for (i = 0; i < checks.length; i++) 
{ 
    if (checks[i].checked) 
    { 
     toppings[i] = checks[i].value; 
     totalChecked += 1; 
     lastChecked = i; // Store the checkbox as last checked 
    } 
} 

if (totalChecked > 4) { 
    alert("You can only choose up to Max of 4 Toppings"); 
    checks[lastChecked].checked = false; // Uncheck the last checked checkbox 
} else { 
// ... 

Wenn Sie t wollen o deaktivieren Sie alle, aber die vier ersten, tun es wie folgt aus:

// ... 
for (i = 0; i < checks.length; i++) 
{ 
    if (checks[i].checked) 
    { 
     toppings[i] = checks[i].value; 
     totalChecked += 1; 
     if (totalChecked > 4) checks[i].checked = false; // Uncheck checkbox 
    } 
} 

Answer 2

Nun werden Sie irgendwie in diese Methode, die insbesondere Checkbox passieren müssen nur geprüft wurde, und dann, wenn die Gesamtzahl geprüft Test fehlschlägt, dann Setzen Sie einfach die Eigenschaft .checked dieses Kontrollkästchens auf false.

Answer 3

Was passiert, wenn der Benutzer mehr als fünf überprüft?

Eine Möglichkeit, dies zu tun, ist eine JavaScript-Funktion zu erstellen, die false zurückgibt, wenn mehr als vier Kontrollkästchen aktiviert sind. In jedem Kästchen der Haken die neue Funktion wie folgt aus:

<input type="checkbox" onclick="return myNewFunction(this);"> 

Dadurch wird der Benutzer von der Überprüfung jedes Kästchen hemmen, die die fünfte ist.

Answer 4

Ich denke, dass ich anders damit umgehen würde. Ich würde einen Click-Handler für jedes Kontrollkästchen haben, der die Anzahl der aktivierten Kästchen zählt (einschließlich des aktuellen, wenn es geprüft wird), um zu sehen, ob es größer als 4 ist. Wenn ja, würde ich das aktuelle Ereignis anhalten und die Warnung, und setzen Sie den Status des Kontrollkästchens zurück, das die Warnung verursacht. Auf diese Weise würde es immer erscheinen, wenn Sie auf das vierte Kontrollkästchen klicken.

Um den Fall zu behandeln, in dem JavaScript deaktiviert ist, müssen Sie sicherstellen, dass der serverseitige Code überprüft, dass nicht mehr als 4 Kontrollkästchen aktiviert wurden.

JQuery Beispiel:

$(':checkbox').click(function() { 
    if ($(this).val() == 'on') { // need to count, since we are checking this box 
     if ($(':checkbox:checked').length > 4) { 
     alert("You can only choose up to a maximum of 4 toppings."); 
     $(this).val('off'); 
     } 
    } 
}); 

Hinweis, wenn Sie andere Arten von Kontrollkästchen auf der Seite haben, können Sie eine Klasse verwenden, um sie zu unterscheiden. In diesem Fall wird der Selektor (':checkbox.topping') und (':checkbox.topping:checked').

Answer 5

Alternativ können Sie verhindern, dass der Benutzer überhaupt eine ungültige Aktion ausführt, indem alle anderen Kontrollkästchen deaktiviert werden, sobald vier davon aktiviert sind, und eine Meldung wie "Wählen Sie bis zu vier davon" angezeigt wird. Auf diese Weise lassen Sie den Benutzer nicht etwas tun, von dem Sie wissen, dass er ungültig ist, und dann schimpfen Sie ihn.