Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] JQuery Checkbboxen nach x ausgewählten sperren

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] JQuery Checkbboxen nach x ausgewählten sperren

    Hallo Leute,

    ich hab auf meiner Seite mehrere Checkboxen, jetzt möchte ich nachdem z.B. 5 Checkboxen ausgewählt wurden die restlichen Sperren.
    Das habe ich auch hinbekommen mit dem lesen von verschiedenen Ergebnissen bei Dr. Google.

    So sieht mein JQuery Code aus:

    Code:
    $("input[type=checkbox]").click(function() {
         var countchecked = $("input[type=checkbox]:checked").length;
    
         if(countchecked >= 5) {
              $('input[type=checkbox]').not(':checked').attr("disabled",true);
         }
         else {
              $('input[type=checkbox]').not(':checked').attr("disabled",false);
         }
    });
    Ich würde jetzt gerne zwei Sachen bei dem Script ändern und da bräuchte ich eure Hilfe, alle Versuche von mir waren nicht erfolgreich.

    1. Die Checkboxen nicht per
    Code:
    input[type=checkbox]
    sondern per ID ansprechen weil so wie es jetzt ist sprech ich ja alle Checkboxen auf der Seite an.

    2. Die Anzahl nach welcher die Checkboxen gesperrt werden von PHP übernehmen.

    Könnt Ihr mir da weiterhelfen ?

    Danke

    Gruß Micha

  • #2
    Du kannst den Status gleich mit in den Selektor stecken, dann musst du nur noch die Anzahl der Ergebnismenge überprüfen.
    Der Selektor sollte auch nicht ID's ansprechen, sondern entweder eine gemeinsame Class oder einen gemeinsamen Namen (du willst sicherstellen, ob aus einer Gruppe von Checkboxen eine gewisse Anzahl selektiert wurde. Zusammengehörige Elemente brauchen ein gemeinsames Kennzeichen)
    Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

    Kommentar


    • #3
      HTML-Code:
      <div class="checkboxLimit" data-checkbox-limit="5">
          <input type="checkbox" />
          <input type="checkbox" />
          <input type="checkbox" />
          <input type="checkbox" />
          <input type="checkbox" />
          <input type="checkbox" />
          <input type="checkbox" />
          <input type="checkbox" />
          <input type="checkbox" />
          <input type="checkbox" />
      </div>
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      
      <script>
      jQuery('.checkboxLimit').on('click', 'input[type="checkbox"]', function() {
          var element = jQuery(this);
          var checkboxes = element.find('input[type="checkbox"]');
          var checkedCheckboxes = checkboxes.filter(':checked');
          var uncheckedCheckboxes = checkboxes.filter(':not(:checked)');
          uncheckedCheckboxes.attr('disabled', checkedCheckboxes.length >= element.data('checkbox-limit'));
      });
      </script>

      Kommentar


      • #4
        Hi,

        danke für die Antworten. Ich hab den Code von Blar mal ausprobiert und bekomm das leider nicht zum laufen.

        @Blar kannst du das mal anschauen was ich da noch falsch mache ?

        http://jsfiddle.net/0uxgmox3/

        Danke Gruß Micha

        Kommentar


        • #5
          Durch eine nachträgliche Änderung, die ich nicht getestet habe, wurde leider das falsche Element verwendet. So der richtige Code:

          Code:
          <script>
          jQuery('.checkboxLimit').on('click', 'input[type="checkbox"]', function(event) {
          	var element = jQuery(event.delegateTarget);
          	var checkboxes = element.find('input[type="checkbox"]');
          	var checkedCheckboxes = checkboxes.filter(':checked');
          	var uncheckedCheckboxes = checkboxes.filter(':not(:checked)');
          	uncheckedCheckboxes.attr('disabled', checkedCheckboxes.length >= element.data('checkbox-limit'));
          })
          </script>

          Kommentar


          • #6
            Huhu,

            sorry das ich erst jetzt Antworte, bin aber leider erst jetzt zum Testen gekomm.

            Es funktioniert genau so wie ich es brauche vielen Danke

            Gruß Micha

            Kommentar

            Lädt...
            X