Form Events in jQuery datepicker() benutzen

[Amit J]

Ich habe das jetzt einfach mit Select gemacht und das funktioniert ganz gut, obwohl ich irgendwo gelesen habe, dass man in jQuery keine for-Schleifen benutzen sollte. Hier nochmal der fertige code.

$(document).ready(function() {
    //disable alle selects, die von "frm_appointmentstart" abhaengen
    $("#frm_appointmentend").attr('disabled','disabled');
    $("#frm_pausestart").attr('disabled','disabled');
    $("#frm_pauseend").attr('disabled','disabled');


   $("#frm_appointmentstart").on( "change", function(){
            
           var index = document.getElementById("frm_appointmentstart").selectedIndex;
           var length=document.getElementById("frm_appointmentstart").length;
           var start = document.getElementById("frm_appointmentstart");
           var end = document.getElementById("frm_appointmentend");
           var p_start = document.getElementById("frm_pausestart");
           var p_end = document.getElementById("frm_pauseend");
           //enable end
           $("#frm_appointmentend").attr('disabled', false);
           $('select').not(this).prop('selectedIndex',0);   
          //disable options depended by start
           for(var i=1; i<length; i++){
               if(i<=index){
                   end.options[i].disabled=true;
                   p_start.options[i].disabled=true;
               }
           }
          
           $("#frm_appointmentend").on( "change", function(){
                   var index = document.getElementById("frm_appointmentend").selectedIndex;
                   //enable p_start
                   $("#frm_pausestart").attr('disabled', false);
                   $('#frm_pausestart').prop('selectedIndex',0);
                  //disable options depended by end
                   for(var i = 1; i < length; i++){                      
                       if(i >= index){
                          
                           p_start.options[i].disabled=true;
                           p_end.options[i].disabled=true;
                       }
                   }
                                   

                    $("#frm_pausestart").on( "change", function(){
                      
                       var index = document.getElementById("frm_pausestart").selectedIndex;
                       //enable p_end
                       $("#frm_pauseend").attr('disabled', false);   
                       $('#frm_pauseend').prop('selectedIndex',0);
                       // disable options depended by p_start   
                       for(var i = 1; i < length; i++){
                           if(i <= index){
                               p_end.options[i].disabled=true;
                           }
                       }
                   });    
           });  

   }); 

//alle Felder auf default zurücksetzen
 $("#add-appointment-type-reset-btn").on('click', function(){
           var length=document.getElementById("frm_appointmentstart").length;
           var start = document.getElementById("frm_appointmentstart");
           var end = document.getElementById("frm_appointmentend");
           var p_start = document.getElementById("frm_pausestart");
           var p_end = document.getElementById("frm_pauseend");
           $("#frm_appointmentend").attr('disabled', true);
           $("#frm_pauseend").attr('disabled', true);
           $("#frm_pausestart").attr('disabled', true);
           $('select').each(function(){
              $(this). prop('selectedIndex',0)
           }); 

           $('input').each(function(){
               $(this).val("");
           });  
           for(var i=1; i<length; i++){
                start.options[i].disabled=false;
                end.options[i].disabled=false;
                p_start.options[i].disabled=false;
                p_end.options[i].disabled=false;
               }      
 });
});