javascript aktivieren diabled Feld, klicken Sie auf und wählen Sie nur ein zu einer Zeit

Ich bin der dynamischen Generierung von Checkboxen mit der id wie chkBox100 etc und mit onClick-Funktion.

Was ich tun möchte, ist

  1. Wählen Sie nur eine checkbox zu einer Zeit.
  2. Wenn eine vorhergehende Kontrollkästchen aktiviert ist, und ein weiteres Kontrollkästchen überprüfen, deslect die Vorherige.
  3. Wenn ich auf die checkbox ausgewählt, es sollte deslect.

Ich will es tun, in standard-javascript ohne jquery oder sonstige library.

Bitte Hilfe, Ihre Hilfe wird geschätzt. Hier ist mein code bisher.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title> New Document </title>  

    <script type="text/javascript">

      function toggle(chkBox)
      {
        if (chkBox.checked)
        {
          chkBox.checked = false;
        }
        else
        {
          chkBox.checked = true;
        }

        //only select one at a time.
      }
    </script>
  </head>

  <body>
    <form id="myForm" name="myForm">
      <input type="checkbox" id="chkBox100"  onClick="toggle(this);">
      <input type="checkbox" id="chkBox121"  onClick="toggle(this);">
      <input type="checkbox" id="chkBox1180" onClick="toggle(this);">
    </form>
  </body>
</html>
Warum nicht verwenden, radio-buttons?
Ich Stimme mit @gereeter. Vielleicht noch ein "Keine" option zum deaktivieren des anderen.
Auch die Formular-Steuerelemente müssen ein name-Attribut, ansonsten können Sie nicht erfolgreich sein und wird nicht aufgenommen werden, wenn das Formular abgeschickt wird.

InformationsquelleAutor Nomad | 2011-12-15

  1. 5

    Ohne Verwendung einer Bibliothek, denke ich, können Sie das folgende tun und es scheint zu funktionieren wenn ich dich richtig verstanden habe.

    Fiddle

    Vielen Dank für Ihre Hilfe.

    InformationsquelleAutor mreyeros

  2. 2

    Den code, den Sie fehlen, ist der code, deaktivieren Sie die Ruhe. Um dies zu tun, sollten Sie zuerst eine Liste alle Kontrollkästchen, und deaktivieren Sie alle von Ihnen. Dann wählen Sie die, die der Benutzer angeklickt hat.

    function toggle(chkBox) {
    checkboxes = document.getElementById("myForm").childNodes;
    var isChecked = chkBox.checked; //this just changed, so it really is whether the box wasn't checked beforehand.
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = false;  //clear all of them
    }
    if (isChecked) {
        chkBox.checked = true; //if the original one wasn't checked, check it
    }
}

    Alternative dazu ist die Verwendung von radio-buttons, die automatisch die ersten zwei Eigenschaften, die Sie wollen, aber nicht die Dritte, obwohl Sie dieses Problem beheben könnte wie RobG gesagt, mit einer anderen option, nämlich "Keine der oben genannten."

    Außer, dass, wenn die checkbox aktiviert und klicken Sie auf deaktiviert, dann isChecked wird false und der code wird erneut zu prüfen (d.h. es wird unmöglich sein, deaktivieren Sie das Kontrollkästchen). Die Letzte Zeile sollte nur " chkBox.checked = isChecked;`. Übrigens, wenn isChecked falsch ist, sollte es keine Notwendigkeit, etwas zu tun.
    Danke, behoben.

    InformationsquelleAutor gereeter

  3. 1

    Haben Sie sich überlegt über radio-buttons mit einem Standard überprüft button, ist quasi die "no-choice" - option? Kein javascript erforderlich.

    <input type="radio" name="rb" value="zero">Zero
<br>
<input type="radio" name="rb" value="one">One
<br>
<input type="radio" name="rb" value="two">Two
<br>
<input type="radio" name="rb" value="None" checked>None of the above
    Vielen Dank für Ihre Hilfe und Zeit.

    InformationsquelleAutor RobG

Schreibe einen Kommentar