2016-08-30 19 views
0

Ich möchte 2 Zeiteingabetypen deaktivieren, wenn der Wert der anderen Eingabetypen gleich ist, also die Datumsdatentypen.Eingabefelder deaktivieren

<tr> 
      <td>Date From</td> 
      <td><input type="date" name="DateFrom" style="width: 235px" required></td> 
      //Example: the inputted value is 08/23/2016 
</tr> 
<tr> 
      <td>Date To</td> 
      <td><input type="date" name="DateTo" style="width: 235px" required></td> 
      //Example: the user will also input 08/23/2016 
</tr> 
<tr> 
      <td>Time From</td> 
      <td><input type="time" name="TimeFrom" style="width: 235px" ></td> 
      //This input field will be disabled 
</tr> 
<tr> 
      <td>Time To</td> 
      <td><input type="time" name="TimeTo" style="width: 235px" ></td> 
      //This input field will be disabled 
</tr> 

Antwort

0

Versuchen folgende jQuery-Funktion wird er die Werte der beiden vergleichen die Datumsfelder, wenn sie sich ändern, wenn beide Felder denselben Wert haben es die Zeitfelder deaktivieren sonst

function compare() { 
    var FromDate = $("[name='DateFrom']").val() 
    var ToDate = $("[name='DateTo']").val() 
    if (FromDate === ToDate) { 
     $("[name='TimeTo']").prop('disabled', true) 
     $("[name='TimeFrom']").prop('disabled', true) 
    } else { 
     $("[name='TimeTo']").prop('disabled', false) 
     $("[name='TimeFrom']").prop('disabled', false) 
    } 
} 
$("[name='DateFrom']").on("change", function() { 
    change(); 
}); 
$("[name='DateTo']").on("change", function() { 
    compare(); 
}); 

Check-out es ihnen ermöglichen, den Link http://jsbin.com/zitezol/1/edit?html,js,output

+0

Wie Sie die Javascript-Datei aufrufen? –

+0

Verwenden Sie folgende Skript-Tag in Abschnitt Ihrer Seite und ändern Quell-Attribut, um Ihre eigene Javascript-Datei zu verknüpfen.

+0

und vergessen Sie nicht, die jquery-Referenz in Ihrem -Tag hinzuzufügen, bevor Sie Ihre eigene JavaScript-Datei verwenden, verwenden Sie die folgenden

0

Ich glaube nicht, dass ich voll und ganz verstehen, was Sie tun wollen, aber ich denke, das ist ähnlich zu dem, was Sie wollen:

<script> 
    var dateFrom = document.getElementsByName('DateFrom')[0]; /* get the DateFrom element */ 

    var dateTo = document.getElementsByName('DateTo')[0]; /* get the DateTo element*/ 

    /* check if their the same date */ 
    if(dateFrom.value == dateTo.value){ 
     /* disable the time selectors */ 
     document.getElementsByName('TimeFrom')[0].disabled = true; 
     document.getElementsByName('TimeTo')[0].disabled = true; 
    } 
</script> 
Verwandte Themen