Auswahlfeld auf Grundlage des Alters vordefinieren / sperren.

[AndreBaust]

Hallo,

ich habe eine Anmeldeformular in dem das Alter abgefragt wird. Anhand des Alters soll der Teilnehmer das Kursangebot in einem Dropdown Menü auswählen können.
Das ist mein bisheriger Entwurf:

style='font-family:Consolas;color:#2B2E2F;background:#F8F8F8'>add_action('wp_footer', 'th_check_minor',99999);style='font-family:Consolas;color:#2B2E2F;background:#F8F8F8'>

function th_check_minor() {

       ?>
           <script type="text/javascript">
            (function($) {
             $('#birthdate').change(function(){
                if($('#birthdate').datepicker('getDate')){
                    var dob = $('#birthdate').datepicker('getDate');
                    var today = new Date();
                    var age = Math.floor((today-dob) / (365.25 * 24 * 60 * 60 * 1000));
                    if(age >= 14){

                        $("#select_course option[value=yes]").attr('selected', 'selected');

                    }else{
                  
                        $("#select_course option[value=yes13]").attr('selected', 'selected');

                    }

                }

            });

             })(jQuery, window, document)

           </script>

       <?php

}style='color:#2B2E2F'>

Mein Problem ist jetzt, dass die richtige Auswahl getroffen wird aber der Teilnehmer die Auswahl händisch wieder ändern kann. Das soll gesperrt sein. Folgende Optionen darf er wählen:

Teilnehmer unter 14 = "yes13" oder "Nein"
Teilnehmer über 14 = "yes" oder "Nein"


Ich hoffe es war verständlich und ihr könnt mir weiterhelfen.

 

[Sempervivum]

Das wird hier diskutiert:
HTML form readonly SELECT tag/input
Versuche, ob eine der empfohlenen Lösungen dein Problem löst.

 

[AndreBaust]

Dankeschön. Hat super funktioniert

 

[AndreBaust]

Hallo,
ich habe den Code jetzt folgendermaßen geändert:

add_action('wp_footer', 'thwepo_calculate_age', 99);

function thwepo_calculate_age(){
 if(is_product()){
  ?>
 <script type="text/javascript">
 (function($){
$(document).ready(function(){

    });
    $(document).change(function(){
        if($('#birthdate').datepicker('getDate')){
            var dob = $('#birthdate').datepicker('getDate');
            var today = new Date();
            var age = Math.floor((today-dob) / (365.25 * 24 * 60 * 60 * 1000));
            $('#age').val(age);
        }
        if(age < 14){
            $("#select_course option[value=yes]").attr('disabled','disabled');
          
        }else{
             $("#select_course option[value=yes13]").attr('disabled','disabled');
          
        }
    return});
 })(jQuery, window, document)
 </script>
 <?php https://tbg-schneesport.de/wp-admin/edit.php?post_type=product&page=th_extra_product_options_pro
 }
}

Allerdings hab ich jetzt das Problem, dass bei ändern des Geburtsdatums alle beide Option aus gegraut sind.

Beispiel: Kunde gibt zuerst das Geburtsdatum: 1.2.2018 ein. Nur wird, richtiger Weise, die Option "Yes" aus gegraut. Wenn der Kunde aber nun das Geburtsdatum nochmal ändert in z.b. 1.1.2000, dann werden beiden Optionen aus gegraut.

Woran kann das liegen?

 

[Sempervivum]

Das liegt daran, dass das Attribut "disabled" ja erhalten bleibt wenn der Benutzer ein anderes Geburtsdatum auswählt. Und bei der neuen Option wird es zusätzlich gesetzt.
Dürfte sich leicht beheben lassen indem Du am Anfang das Attribut "disabled" bei allen Optionen entfernst:

        $(document).change(function () {
            if ($('#birthdate').datepicker('getDate')) {
                var dob = $('#birthdate').datepicker('getDate');
                var today = new Date();
                var age = Math.floor((today - dob) / (365.25 * 24 * 60 * 60 * 1000));
                $('#age').val(age);
            }
            // Zunächst bei allen Optionen das Attribut "disabled" entfernen:
            $("#select_course option").removeAttr('disabled');
            if (age < 14) {
                $("#select_course option[value=yes]").attr('disabled', 'disabled');

            } else {
                $("#select_course option[value=yes13]").attr('disabled', 'disabled');

            }
            return
        });

Das Drumherum musst Du natürlich beibehalten.

 

[Sempervivum]

PS: Wenn ich das richtig sehe, gehört der Code für das Setzen von "disabled" mit in das if:

        $(document).change(function () {
            if ($('#birthdate').datepicker('getDate')) {
                var dob = $('#birthdate').datepicker('getDate');
                var today = new Date();
                var age = Math.floor((today - dob) / (365.25 * 24 * 60 * 60 * 1000));
                $('#age').val(age);
                // Zunächst bei allen Optionen das Attribut "disabled" entfernen:
                $("#select_course option").removeAttr('disabled');
                if (age < 14) {
                    $("#select_course option[value=yes]").attr('disabled', 'disabled');

                } else {
                    $("#select_course option[value=yes13]").attr('disabled', 'disabled');

                }
            }
            return
        });

 

[AndreBaust]

Super dank. Hat funktioniert

 

[Jan-Frederik Stieler]

@AndreBaust könntest Du bitte in Zukunft Codeblöcke für Code benutzen?
Ich korrigiere das mal für Dich. Dann lässt sich dieser auch besser von anderen lesen.