Ankündigung

Einklappen
Keine Ankündigung bisher.

Bootstrap Modal checkbox (dynamisch) event handler, wie ??

Einklappen

Neue Werbung 2019

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

  • Bootstrap Modal checkbox (dynamisch) event handler, wie ??

    Hallo,
    ich versuche mehrere checkbox Klicks abzufragen um damit weiter zu arbeiten.
    Leider bekomme ich es nicht hin da die checkboxe in ein bootstrap modal sind.
    Das Problem besteht wenn die checkboxe etc... in ein Modal ist, auf eine normale Seite ist es kein Problem.

    Gibt es eine Möglichkeit, das handling im modal abzufangen?
    am besten über den name, da die id's der checkbox sich ändern.

    Habe ganze zeit versucht irgendeine Ausgabe oder reaktion (function) mit ein klick in modal aufzurufen, leider ohne Erfolg.


    HTML-Code:
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-check">
                <input class="form-check-input position-static" name="meincheckbox" type="checkbox" id="checkbox10" value="10">
                </div>
                <div class="form-check">
                <input class="form-check-input position-static" name="meincheckbox" type="checkbox" id="checkbox14" value="14">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            </div>
        </div>
    </div>
    Code:
    $('input[name=meincheckbox]').change(function(){
        if($(this).is(':checked')) {
         alert("done");
        }
    });
    Vielen dank im voraus,
    MfG c01001.
    Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

  • #2
    wenn du die eine Klammer } raus nimmst die zu viel ist läuf das Script doch
    Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
    Erreichbar in mein Javascript-Forum und in Facebook-Chat

    Kommentar


    • #3
      Zitat von basti1012 Beitrag anzeigen
      wenn du die eine Klammer } raus nimmst die zu viel ist läuf das Script doch
      Hallo,
      muss mich entschuldigen, habe vergessen was zu erwähnen.
      Die Anzahl der checkboxe und Werte ändern sich (dynamisch), die kommen aus ein PHP Datei, erst nach aufrufen der modal durch ein Button.
      Das bedeutet das die checkbox nicht vorher in html geschrieben sind, erst nach Button click.
      Das eine Klammer }, war ein Tippfehler von meiner Seite aus, hier beim Beitrag erstellen (Code editiert).
      Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

      Kommentar


      • #4
        Ungetestet. Wenn du Content dynamisch hinzufügst musst du $(document) verwenden.

        HTML-Code:
        $(document).on('change', '.form-check-input', function() {
          if ($(this).is(':checked')) {
            alert('done');
          }
        }

        Kommentar


        • #5
          Wenn du den Code hier eintippst warum rückst du ihn dann nicht vernünftig ein, so das nicht alles in einer horizontalen Zeile erscheint?

          Kommentar


          • #6
            Zitat von protestix Beitrag anzeigen
            Wenn du den Code hier eintippst warum rückst du ihn dann nicht vernünftig ein, so das nicht alles in einer horizontalen Zeile erscheint?
            Hallo,
            ich denke du meinst den HTML Code?
            Das habe ich versucht, aber ging nicht in [ html ].
            Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

            Kommentar


            • #7
              Zitat von jonas3344 Beitrag anzeigen
              Ungetestet. Wenn du Content dynamisch hinzufügst musst du $(document) verwenden.

              HTML-Code:
              $(document).on('change', '.form-check-input', function() {
              if ($(this).is(':checked')) {
              alert('done');
              }
              }
              Klasse, hat funktioniert.
              Danke!
              Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

              Kommentar


              • #8
                Was heisst ging nicht, was hast du für einen schwachen Editor?
                Das ist ein Klick auf reformat et voilá
                HTML-Code:
                <div class="modal" tabindex="-1" role="dialog">   
                    <div class="modal-dialog" role="document">     
                        <div class="modal-content">       
                            <div class="modal-header">         
                                <h5 class="modal-title">Modal title</h5>         
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">           
                                    <span aria-hidden="true">&times;
                                    </span>         
                                </button>       
                            </div>       
                            <div class="modal-body">   
                                <div class="form-check">   
                                    <input class="form-check-input position-static" name="meincheckbox" type="checkbox" id="checkbox10" value="10">
                                </div>          
                                <div class="form-check">   
                                    <input class="form-check-input position-static" name="meincheckbox" type="checkbox" id="checkbox14" value="14">
                                </div>        
                            </div>       
                            <div class="modal-footer">         
                                <button type="button" class="btn btn-primary">Save changes
                                </button>        
                            </div>      
                        </div>    
                    </div>  
                </div>

                Kommentar


                • #9
                  Zitat von protestix Beitrag anzeigen
                  Was heisst ging nicht, was hast du für einen schwachen Editor?
                  Das ist ein Klick auf reformat et voilá
                  LMAO nein in mein Editor ging es sauber.
                  Hier bei Einfügen (Wenn man ein Beitrag schreibt), wurde mir immer wieder richtig angezeigt,
                  wie du auch gepostest hast.
                  Aber wurde bei der Vorschau und in obigen Eintrag verschoben.
                  (Kopieren und Einfügen lief was schief )

                  Aber Danke!
                  Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

                  Kommentar


                  • #10
                    Zitat von c01001 Beitrag anzeigen
                    LMAO nein in mein Editor ging es sauber.
                    Hier bei Einfügen (Wenn man ein Beitrag schreibt), wurde mir immer wieder richtig angezeigt,
                    wie du auch gepostest hast.
                    Aber wurde bei der Vorschau und in obigen Eintrag verschoben.
                    Man hätte es ja auch mal mit einer anderen Kombi aus Editor und/oder Browser versuchen und es nicht einfach so belassen können. Nachdem es andere schaffen, ihren Code einzufügen, muss es ja gehen.

                    Kommentar

                    Lädt...
                    X